/* Technosys Ecommerce Enhancements 26.9.13.4
Theme-friendly tokens: future palette changes can be made by overriding these variables. */
:root{
--technosys-accent:#d71920;
--technosys-accent-strong:#b31416;
--technosys-accent-soft:#fff3f4;
--technosys-ink:#172033;
--technosys-muted:#667085;
--technosys-line:#eceef2;
--technosys-surface:#fff;
--technosys-info-surface:#f8f9fb;
--technosys-success:#16833b;
--technosys-danger:#d71920;
--technosys-shadow:0 4px 16px rgba(16,24,40,.09);
}
/* --------------------------------------------------------------------------
Responsive delivery/info header
-------------------------------------------------------------------------- */
.ts-ecom-headerbar{width:100%;box-sizing:border-box;background:linear-gradient(180deg,#fff 0%,var(--technosys-info-surface) 100%);color:var(--technosys-ink);border-bottom:1px solid var(--technosys-line);font-family:inherit;position:relative;z-index:2}
.ts-info-inner{width:100%;max-width:1500px;margin:0 auto;box-sizing:border-box;display:grid;grid-template-columns:minmax(270px,auto) auto minmax(360px,1fr);align-items:center;gap:14px;padding:9px 22px;min-height:50px}
.ts-location-block{display:flex;align-items:center;gap:8px;min-width:0}
.ts-info-icon{display:grid;place-items:center;flex:0 0 auto;color:#315a7d}
.ts-info-icon svg{width:20px;height:20px;display:block;fill:currentColor}
.ts-location-copy{display:flex;align-items:baseline;gap:7px;min-width:0}
.ts-delivery-label{color:#4b5565;font-size:13px;white-space:nowrap}
.ts-delivery-address{font-size:13px;line-height:1.25;color:#111827;min-width:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
.ts-change-location{font-size:13px;font-weight:650;color:#2b5aa7!important;text-decoration:none!important;white-space:nowrap;padding-left:7px;border-left:1px solid #cfd4dc}
.ts-change-location:hover{text-decoration:underline!important}
.ts-deals-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:6px 15px;border-radius:999px;background:linear-gradient(180deg,var(--technosys-accent) 0%,var(--technosys-accent-strong) 100%);color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:750;box-shadow:0 2px 6px rgba(179,20,22,.2);white-space:nowrap}
.ts-deals-link:hover{filter:brightness(.96);color:#fff!important}
.ts-deals-link svg{width:15px;height:15px;fill:currentColor;display:block}
.ts-deals-mobile{display:none}
.ts-store-card{display:flex;align-items:center;min-width:0;gap:10px;padding-left:14px;border-left:1px solid #d8dce3}
.ts-status-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--technosys-success);box-shadow:0 0 0 4px rgba(22,131,59,.10)}
.ts-store-card.closed .ts-status-dot{background:var(--technosys-danger);box-shadow:0 0 0 4px rgba(215,25,32,.10)}
.ts-status-copy{display:flex;align-items:center;gap:15px;min-width:0}
.ts-store-status{font-size:13px;font-weight:750;white-space:nowrap}
.ts-store-status.closed{color:var(--technosys-danger)}
.ts-store-status.open{color:var(--technosys-success)}
.ts-after-hours-message{display:block;color:#30394a;font-size:12px;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-mobile-quick-row{display:none}
/* Exactly one compact existing theme header becomes sticky. No clone or placeholder is created.
The delivery/status info bar deliberately stays outside the sticky shell in normal document flow. */
.ts-sticky-shell{position:sticky!important;top:var(--ts-sticky-top,0px)!important;z-index:10020!important;box-sizing:border-box!important;background:var(--technosys-surface,#fff)!important;isolation:isolate!important;box-shadow:0 4px 12px rgba(0,0,0,.10)!important}
.ts-sticky-companion{position:sticky!important;top:var(--ts-sticky-companion-top,0px)!important;z-index:10019!important;margin-top:0!important;box-shadow:0 3px 8px rgba(0,0,0,.08)!important}
/* --------------------------------------------------------------------------
Deals page: exactly one compact badge. JS reuses the active theme badge footprint when found.
-------------------------------------------------------------------------- */
.ts-deals-page .picture img{max-width:100%;height:auto}
.ts-deals-page .product-title a{text-decoration:none}
.ts-deals-page .product-item{position:relative}
.ts-deal-badge-fallback{display:flex!important;position:absolute;top:10px;right:10px;z-index:80;min-width:40px;width:auto;height:26px;border-radius:13px;align-items:center;justify-content:center;text-align:center;background:#86c400!important;background-image:none!important;color:#fff!important;font-weight:750;font-size:11px;line-height:1;padding:0 8px;box-sizing:border-box;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ts-deal-badge-fallback:before,.ts-deal-badge-fallback:after{content:none!important;display:none!important}
.ts-deal-badge-fallback.ts-use-theme-badge{display:none!important}
.ts-store-closed-checkout{padding:12px;background:#fff3cd;border:1px solid #ffeeba;color:#856404;margin:10px 0;font-weight:600}
.ts-store-closed-checkout-allowed{margin:10px 0;padding:10px 12px;border:1px solid #b8daff;background:#e8f4ff;border-radius:4px}
.ts-location-message.error{color:#b42318}.ts-location-message.success{color:#16833b}
/* Location modal - namespaced so active theme styles cannot distort it. */
.ts-modal{display:none;position:fixed;inset:0;z-index:1000000;background:rgba(16,24,40,.48);padding:20px;align-items:center;justify-content:center}
.ts-modal.open{display:flex}
.ts-modal-card{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.ts-modal-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer}
.ts-current-location,.ts-modal-card form button{width:100%;border:0;border-radius:6px;padding:11px 12px;background:var(--technosys-accent);color:#fff;font-weight:700;cursor:pointer}
.ts-modal-card select{width:100%;min-height:42px;margin:8px 0;padding:8px;border:1px solid #d5d9df;border-radius:5px;background:#fff}
.ts-area-picker{margin-top:4px}
.ts-area-search-label{display:block;margin:0 0 5px;color:var(--technosys-ink);font-size:12px;font-weight:700}
.ts-area-search{display:block;width:100%;height:42px;border:1px solid #cfd5dd;border-radius:7px;padding:9px 11px;background:#fff;color:#1f2937;font:inherit;outline:none;box-sizing:border-box}
.ts-area-search:focus{border-color:var(--technosys-accent);box-shadow:0 0 0 3px rgba(215,25,32,.10)}
.ts-area-select{margin-top:7px!important}
.ts-area-search-help{margin:2px 0 8px;color:#7b8494;font-size:11px;line-height:1.35}
.ts-or{text-align:center;color:#7b8494;font-size:12px;margin:12px 0}
.ts-location-message{margin-top:9px;font-size:12px;line-height:1.4}
/* --------------------------------------------------------------------------
Smart autocomplete
-------------------------------------------------------------------------- */
.ts-smart-search-wrap{position:relative!important}
.ts-smart-suggestions{position:absolute;left:0;right:0;top:100%;z-index:100000;background:#fff;border:1px solid #ddd;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:440px;overflow:auto;display:none;text-align:left}
.ts-smart-suggestions.open{display:block}
.ts-smart-suggestion{display:flex!important;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid #eee;text-decoration:none!important;color:#333!important;background:#fff;min-height:58px;box-sizing:border-box}
.ts-smart-suggestion:hover,.ts-smart-suggestion.active{background:#f5f5f5!important}
.ts-smart-suggestion img{display:block!important;width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important;object-fit:contain;flex:0 0 48px}
.ts-smart-suggestion .ts-smart-copy{display:flex!important;flex-direction:column;justify-content:center;gap:3px;min-width:0;flex:1 1 auto}
.ts-smart-suggestion .ts-smart-name{display:block!important;min-width:0;color:#222!important;font-size:14px!important;line-height:1.25!important;font-weight:600!important;white-space:normal!important;overflow:visible!important;text-indent:0!important}
.ts-smart-suggestion .ts-smart-price{display:block!important;color:#555!important;font-size:13px!important;line-height:1.2!important;white-space:nowrap;font-weight:600!important;text-indent:0!important}
.ts-smart-view-all{display:block;padding:10px;text-align:center;font-weight:700;text-decoration:none!important;border-top:1px solid #ddd;background:#fafafa;color:#333!important}
.ts-smart-empty{padding:12px;color:#666;font-size:13px}
body.ts-smart-search-active .ui-autocomplete.ts-suppressed-autocomplete{display:none!important}
/* Social login */
.ts-social-login-block{margin:18px 0}.ts-social-login-separator{display:flex;align-items:center;gap:10px;color:#777;margin:10px 0}.ts-social-login-separator:before,.ts-social-login-separator:after{content:'';height:1px;background:#ddd;flex:1}.ts-social-login-buttons{display:flex;gap:10px;flex-wrap:wrap}.ts-social-login-button{display:inline-block;padding:10px 14px;border-radius:3px;text-decoration:none!important;font-weight:600;border:1px solid #ccc;background:#fff;color:#333}.ts-google-login:hover{background:#f7f7f7}.ts-facebook-login{background:#1877f2;color:#fff;border-color:#1877f2}.ts-facebook-login:hover{color:#fff;background:#166fe5}.ts-social-error{padding:10px 12px;margin:10px 0;background:#fdecea;border:1px solid #f5c2c0;color:#9c1c1c}
/* --------------------------------------------------------------------------
Mobile premium info card. The theme's real header remains the sticky shell; this information
card is immediately below it in normal flow so it never consumes most of the viewport.
-------------------------------------------------------------------------- */
@media (max-width:767px){
.ts-ecom-headerbar{background:linear-gradient(180deg,#fff 0%,#fff7f7 100%);border-bottom:1px solid #f1dddd}
.ts-info-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px 10px;padding:14px 14px 15px;min-height:0}
.ts-location-block{gap:9px;min-width:0}
.ts-location-pin{width:36px;height:36px;border-radius:50%;background:#fdebed;color:var(--technosys-accent-strong)}
.ts-location-pin svg{width:18px;height:18px}
.ts-location-copy{display:block;min-width:0;line-height:1.2}
.ts-delivery-label{display:block;font-size:11px;color:#7b8494;margin-bottom:2px}
.ts-delivery-address{display:block;font-size:15px;font-weight:800;max-width:190px;color:#151515;text-transform:none}
.ts-change-location{font-size:12px;font-weight:750;color:var(--technosys-accent-strong)!important;border-left:0;padding-left:0;align-self:center}
.ts-deals-link{justify-self:end;min-height:34px;padding:8px 12px;font-size:12px;box-shadow:none}
.ts-deals-link svg{display:none}
.ts-deals-desktop{display:none}.ts-deals-mobile{display:inline}
.ts-store-card{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #efdcdc;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(179,20,22,.055)}
.ts-status-dot{width:10px;height:10px;margin-top:4px}
.ts-status-copy{display:block;min-width:0}
.ts-store-status{display:block;font-size:13px;font-weight:800;margin-bottom:4px;white-space:normal}
.ts-after-hours-message{display:block;font-size:12px;line-height:1.45;color:#5b6472;white-space:normal;overflow:visible;text-overflow:clip}
.ts-mobile-quick-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ts-quick-card{min-width:0;border:1px solid #e5e7eb;border-radius:12px;padding:10px 11px;background:#fff}
.ts-quick-card span{display:block;font-size:11px;color:#7a8493;font-weight:650;margin-bottom:3px}
.ts-quick-card strong{display:block;font-size:12px;line-height:1.3;color:#20242b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-smart-suggestions{position:fixed!important;left:8px!important;right:8px!important;top:auto;max-height:min(60vh,440px)}
}
@media (max-width:420px){
.ts-info-inner{padding-left:10px;padding-right:10px}
.ts-location-pin{width:32px;height:32px}
.ts-delivery-address{font-size:14px;max-width:145px}
.ts-change-location{font-size:11px}
.ts-deals-link{padding:8px 10px}
}
@media (min-width:768px) and (max-width:1100px){
.ts-info-inner{grid-template-columns:minmax(220px,auto) auto minmax(260px,1fr);padding-left:14px;padding-right:14px;gap:10px}
.ts-after-hours-message{max-width:360px}
}
/* R8 stabilization: Deals discovery + core-sales card UX. Everything is page-scoped. */
.ts-deals-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.ts-deals-heading h1{margin-bottom:4px}.ts-deals-subtitle{font-size:14px;color:#666}.ts-deals-toolbar{display:grid;grid-template-columns:minmax(250px,280px) minmax(0,1fr);gap:24px;align-items:start}.ts-deals-filters{border:1px solid #e5e5e5;border-radius:10px;background:#fff;padding:14px;position:sticky;top:12px}.ts-deals-filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.ts-deals-filter-close{display:none;border:0;background:transparent;font-size:28px;line-height:1}.ts-deals-category-search-wrap{display:block;margin:6px 0 8px}.ts-deals-category-search{display:block;width:100%;min-height:38px;box-sizing:border-box;border:1px solid #d6dbe2;border-radius:7px;padding:7px 10px;background:#fff;color:#222}.ts-deals-category-search:focus{outline:0;border-color:var(--technosys-accent);box-shadow:0 0 0 3px rgba(215,25,32,.08)}.ts-deals-filter-option{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 2px;cursor:pointer}.ts-deals-filter-option[hidden]{display:none!important}.ts-deals-filter-option>b{font-size:12px;font-weight:600;color:#777;justify-self:end;white-space:nowrap;text-align:right}.ts-deals-filter-option>span{min-width:0;line-height:1.25;overflow-wrap:anywhere}.ts-deals-filter-option>input[type=checkbox]{-webkit-appearance:checkbox!important;appearance:auto!important;display:block!important;visibility:visible!important;opacity:1!important;position:static!important;float:none!important;width:16px!important;height:16px!important;min-width:16px!important;margin:0!important;padding:0!important;clip:auto!important;clip-path:none!important;transform:none!important}.ts-deals-filter-no-category{padding:9px 2px;color:#777;font-size:12px}.ts-deals-clear{margin-top:8px;border:0;background:transparent;text-decoration:underline;padding:4px 0;cursor:pointer}.ts-deals-filter-toggle{display:none}.ts-deals-results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.ts-deals-sort{display:flex;align-items:center;gap:8px}.ts-deals-sort select{min-height:36px;padding:5px 34px 5px 9px}.ts-deals-page .ts-deals-grid .item-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}.ts-deals-page .ts-deals-card{position:relative!important;width:auto!important;min-width:0!important;margin:0!important;float:none!important;display:block!important}.ts-deals-page .ts-deals-card[hidden]{display:none!important}.ts-deal-card-inner{position:relative;height:100%;display:flex;flex-direction:column;border:1px solid #e8e8e8;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.035)}.ts-deal-picture{position:relative;min-height:198px;display:flex;align-items:center;justify-content:center;padding:12px;background:#fff;box-sizing:border-box}.ts-deal-picture>a{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:174px!important;text-decoration:none!important}.ts-deal-image{display:block!important;position:static!important;visibility:visible!important;opacity:1!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:210px!important;object-fit:contain!important;transform:none!important;margin:0 auto!important}.ts-deal-details{display:flex;flex:1;flex-direction:column;padding:12px;min-width:0}.ts-deal-title{min-height:42px;margin:0 0 8px;font-size:14px;line-height:1.4;font-weight:650;overflow:hidden}.ts-deal-title a{color:inherit;text-decoration:none}.ts-deal-price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;min-height:28px}.ts-deal-price{font-weight:800;font-size:16px;line-height:1.2;color:#111}.ts-deal-old-price{text-decoration:line-through;color:#888;font-size:12px}.ts-deal-stock{min-height:18px;margin-top:5px;color:#697386;font-size:11px;line-height:1.35}.ts-deal-actions{margin-top:auto;padding-top:10px}.ts-deal-primary-action{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:38px!important;box-sizing:border-box!important;text-align:center!important;text-decoration:none!important;cursor:pointer}.ts-deal-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}.ts-deal-secondary-action{width:100%!important;min-width:0!important;min-height:31px!important;padding:4px 5px!important;font-size:10px!important;line-height:1.15!important;white-space:normal!important;cursor:pointer}.ts-deal-badge{display:flex!important;position:absolute;top:9px;right:9px;z-index:20;min-width:48px;min-height:27px;border-radius:14px;align-items:center;justify-content:center;background:#86c400!important;background-image:none!important;color:#fff!important;font-weight:800;font-size:11px;line-height:1;padding:0 8px;box-sizing:border-box;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.12)}.ts-deals-no-match{padding:32px;text-align:center;border:1px dashed #ddd;border-radius:8px;color:#666}.ts-deals-empty{padding:30px;text-align:center}
/* Product detail only: allow a percentage ribbon's own text box to expand instead of clipping "% OFF". */
.product-details-page .ts-percent-ribbon-safe,.product-essential .ts-percent-ribbon-safe{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important;width:auto!important;min-width:max-content!important;padding-left:7px!important;padding-right:7px!important;box-sizing:border-box!important}.product-details-page .ts-percent-ribbon-host,.product-essential .ts-percent-ribbon-host{overflow:visible!important}
@media(max-width:1100px){.ts-deals-page .ts-deals-grid .item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
.ts-deals-toolbar{display:block}.ts-deals-filter-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border:1px solid #ccc;border-radius:6px;background:#fff}.ts-deals-filters{display:none;position:fixed;z-index:1000002;left:12px;right:12px;top:12%;max-height:76vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.25)}.ts-deals-filters.ts-open{display:block}.ts-deals-filter-close{display:block}.ts-deals-results-head{align-items:flex-start;flex-direction:column}.ts-deals-page .ts-deals-grid .item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ts-deal-picture{min-height:128px;padding:6px}.ts-deal-picture>a{min-height:116px!important}.ts-deal-image{max-height:132px!important}.ts-deal-details{padding:8px}.ts-deal-title{min-height:38px;margin-bottom:5px;font-size:12px;line-height:1.35}.ts-deal-price{font-size:14px}.ts-deal-old-price{font-size:10px}.ts-deal-stock{font-size:10px}.ts-deal-primary-action{min-height:34px!important;padding:6px 5px!important;font-size:11px!important}.ts-deal-secondary-action{font-size:9px!important;min-height:29px!important}.ts-deal-badge{top:6px;right:6px;min-width:43px;min-height:24px;font-size:10px;padding:0 6px}.ts-deals-subtitle{font-size:13px}
/* Off-canvas category panels never contribute height to the compact sticky header. */
.ts-sticky-shell .header-menu.categories-in-side-panel,.ts-sticky-shell .categories-in-side-panel{position:fixed!important;top:0!important;bottom:0!important;height:100vh!important;max-height:100vh!important;margin:0!important}
}
@media(max-width:339px){.ts-deals-page .ts-deals-grid .item-grid{grid-template-columns:1fr}.ts-deal-picture{min-height:150px}.ts-deal-picture>a{min-height:138px!important}.ts-deal-image{max-height:155px!important}}
/* R8 video-fix: compact two-column Deals cards on phones. */
@media(max-width:767px){
.ts-deals-page .ts-deals-grid .item-grid{gap:7px!important}
.ts-deal-card-inner{border-radius:7px!important}
.ts-deal-picture{min-height:96px!important;padding:4px!important}
.ts-deal-picture>a{min-height:90px!important}
.ts-deal-image{max-height:104px!important}
.ts-deal-details{padding:6px!important}
.ts-deal-title{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;min-height:32px!important;max-height:32px!important;margin:0 0 4px!important;font-size:11px!important;line-height:1.4!important}
.ts-deal-price-row{min-height:22px!important;gap:2px 5px!important;align-content:flex-start!important}
.ts-deal-price{font-size:13px!important;line-height:1.15!important}
.ts-deal-old-price{font-size:9px!important;line-height:1.1!important}
.ts-deal-stock{min-height:0!important;margin-top:3px!important;font-size:9px!important;line-height:1.25!important}
.ts-deal-actions{padding-top:6px!important}
.ts-deal-primary-action{min-height:30px!important;padding:4px 3px!important;font-size:10px!important;line-height:1.1!important}
.ts-deal-secondary-actions{gap:3px!important;margin-top:4px!important}
.ts-deal-secondary-action{min-height:24px!important;padding:2px!important;font-size:8px!important;line-height:1.05!important}
.ts-deal-badge{top:4px!important;right:4px!important;min-width:38px!important;min-height:20px!important;padding:0 5px!important;font-size:8.5px!important;border-radius:11px!important}
.ts-deals-heading{gap:8px!important;margin-bottom:12px!important}
.ts-deals-subtitle{font-size:11.5px!important;line-height:1.3!important}
.ts-deals-filter-toggle{min-height:32px!important;padding:5px 9px!important;font-size:11px!important}
}
/* ==========================================================================
R8 26.9.12.4 - DEALS HEADING / CUSTOMER-FACING UX FIX
Keep the Deals title and explanatory copy visually centered across the full
page instead of inheriting the theme's left-corner page-title alignment.
========================================================================== */
.ts-deals-page .ts-deals-heading{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
max-width:none!important;
margin:0 auto 18px!important;
padding-left:12px!important;
padding-right:12px!important;
box-sizing:border-box!important;
text-align:center!important;
gap:10px!important;
}
.ts-deals-page .ts-deals-heading>div{width:100%!important;text-align:center!important}
.ts-deals-page .ts-deals-heading h1{display:block!important;float:none!important;width:auto!important;margin:0 auto 5px!important;text-align:center!important}
.ts-deals-page .ts-deals-subtitle{display:block!important;width:100%!important;margin:0 auto!important;text-align:center!important}
.ts-deals-page .ts-deals-filter-toggle{align-self:center!important}
/* ==========================================================================
R8 26.9.12.5 - CONSOLIDATED LIVE UX FIXES
Deals filter/actions, Smart Search placement and desktop product carousels.
========================================================================== */
.ts-deals-page .ts-deals-filter-toggle{border:1px solid var(--technosys-accent)!important;background:var(--technosys-accent)!important;color:#fff!important;border-radius:8px!important;font-weight:800!important;letter-spacing:.35px!important;text-transform:uppercase!important;box-shadow:0 2px 7px rgba(0,0,0,.12)!important}
.ts-deals-page .ts-deals-filter-toggle:hover{background:var(--technosys-accent-strong)!important;border-color:var(--technosys-accent-strong)!important;color:#fff!important}
.ts-deals-page .ts-deals-filter-option{border:1px solid #e6e7e9!important;border-radius:8px!important;margin:0 0 6px!important;padding:9px 8px!important;background:#fff!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important}
.ts-deals-page .ts-deals-filter-option:hover{border-color:var(--technosys-accent)!important;background:#fff7f7!important}
.ts-deals-page .ts-deals-filter-option.ts-selected{border-color:var(--technosys-accent)!important;background:var(--technosys-accent)!important;color:#fff!important}
.ts-deals-page .ts-deals-filter-option.ts-selected>b,.ts-deals-page .ts-deals-filter-option.ts-selected>span{color:#fff!important}
.ts-deals-page .ts-deals-filter-option.ts-selected>input[type=checkbox]{accent-color:#fff!important}
.ts-deals-page .ts-deals-result-summary{font-weight:650!important;color:#333!important}
.ts-deals-page .ts-deal-secondary-action{background:var(--technosys-accent)!important;background-image:none!important;border:1px solid var(--technosys-accent)!important;color:#fff!important;border-radius:4px!important;font-weight:700!important;text-shadow:none!important;box-shadow:none!important}
.ts-deals-page .ts-deal-secondary-action:hover{background:var(--technosys-accent-strong)!important;border-color:var(--technosys-accent-strong)!important;color:#fff!important}
.ts-smart-view-all{background:var(--technosys-accent)!important;color:#fff!important;border-top:1px solid var(--technosys-accent-strong)!important;text-transform:uppercase!important;letter-spacing:.3px!important}
.ts-smart-view-all:hover{background:var(--technosys-accent-strong)!important;color:#fff!important}
@media(max-width:767px){
body.ts-deals-filter-open{overflow:hidden!important}
.ts-deals-page .ts-deals-heading{margin-bottom:10px!important}
.ts-deals-page .ts-deals-filter-toggle{display:flex!important;width:100%!important;max-width:260px!important;min-height:38px!important;padding:8px 14px!important;margin-top:2px!important;font-size:12px!important}
.ts-deals-page .ts-deals-results-head{gap:9px!important;margin-bottom:10px!important}
.ts-deals-page .ts-deals-result-summary{font-size:13px!important}
.ts-deals-page .ts-deals-filters{padding:0 12px 14px!important;border:0!important;border-radius:12px!important;background:#fff!important;overflow:auto!important}
.ts-deals-page .ts-deals-filter-head{position:sticky!important;top:0!important;z-index:2!important;margin:0 -12px 10px!important;padding:12px 14px!important;background:var(--technosys-accent)!important;color:#fff!important;border-radius:12px 12px 0 0!important}
.ts-deals-page .ts-deals-filter-head strong{font-size:14px!important;letter-spacing:.45px!important;text-transform:uppercase!important;color:#fff!important}
.ts-deals-page .ts-deals-filter-close{color:#fff!important;font-weight:400!important}
.ts-deals-page .ts-deals-category-search{min-height:40px!important;border-radius:8px!important}
.ts-deals-page .ts-deals-filter-option{grid-template-columns:18px minmax(0,1fr) auto!important;padding:10px 9px!important;font-size:12px!important}
.ts-deals-page .ts-deals-clear{display:block!important;width:100%!important;min-height:36px!important;margin-top:10px!important;border:1px solid var(--technosys-accent)!important;border-radius:7px!important;background:#fff!important;color:var(--technosys-accent)!important;text-decoration:none!important;font-weight:750!important;text-transform:uppercase!important}
.ts-deals-page .ts-deal-secondary-action{min-height:28px!important;padding:4px 3px!important;font-size:9.5px!important;line-height:1.15!important}
.ts-smart-suggestions{position:fixed!important;bottom:auto!important;max-height:min(58vh,430px)!important;overflow:auto!important;border-radius:0 0 6px 6px!important}
}
/* ==========================================================================
R8 26.9.13.1 - FINAL BLOCKER / ACCEPTANCE FIX
Sticky header isolation, staged mobile Deals filters, aligned cards/actions,
Smart Search positioning and resilient Smart Product Collection Slick repair.
========================================================================== */
.ts-ecom-headerbar[data-ts-info-bar="1"],
.ts-ecom-headerbar.ts-sticky-info-normal-flow{
position:relative!important;
top:auto!important;
bottom:auto!important;
transform:none!important;
}
.ts-deals-filter-body{min-height:0}
.ts-deals-filter-footer{display:block}
.ts-deals-apply{display:none}
/* Deals cards use deterministic vertical slots so one long/short title never shifts prices/actions. */
.ts-deals-page .ts-deal-picture{height:228px!important;min-height:228px!important;max-height:228px!important}
.ts-deals-page .ts-deal-picture>a{height:204px!important;min-height:204px!important;max-height:204px!important}
.ts-deals-page .ts-deal-image{max-height:204px!important}
.ts-deals-page .ts-deal-title{
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
height:42px!important;
min-height:42px!important;
max-height:42px!important;
overflow:hidden!important;
}
.ts-deals-page .ts-deal-price-row{height:34px!important;min-height:34px!important;align-content:center!important}
.ts-deals-page .ts-deal-stock{height:18px!important;min-height:18px!important;max-height:18px!important;overflow:hidden!important}
.ts-deals-page .ts-deal-stock-empty{visibility:hidden!important}
.ts-deals-page .ts-deal-secondary-action{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
min-height:34px!important;
padding:5px 8px!important;
font-size:11px!important;
line-height:1!important;
white-space:nowrap!important;
}
.ts-deals-page .ts-deal-action-icon{display:block!important;width:15px!important;height:15px!important;flex:0 0 15px!important;fill:currentColor!important}
@media(max-width:767px){
/* Remove theme/page-title top offsets on Deals only; previous content/header keeps normal flow. */
.ts-deals-page{margin-top:0!important;padding-top:0!important}
.ts-deals-page>.page-title.ts-deals-heading{margin-top:0!important;padding-top:0!important;transform:none!important}
.ts-deals-page>.page-body{margin-top:0!important;padding-top:0!important}
body.ts-deals-filter-open:before{
content:"";position:fixed;inset:0;z-index:1000001;background:rgba(17,24,39,.42);pointer-events:auto
}
.ts-deals-page .ts-deals-filters{
display:none!important;
position:fixed!important;
z-index:1000002!important;
left:10px!important;right:10px!important;top:8vh!important;bottom:8vh!important;
width:auto!important;max-width:none!important;max-height:none!important;
padding:0!important;margin:0!important;
overflow:hidden!important;
flex-direction:column!important;
border:0!important;border-radius:14px!important;background:#fff!important;
box-shadow:0 18px 55px rgba(0,0,0,.28)!important
}
.ts-deals-page .ts-deals-filters.ts-open{display:flex!important}
.ts-deals-page .ts-deals-filter-head{
position:relative!important;top:auto!important;flex:0 0 auto!important;
margin:0!important;padding:12px 14px!important;border-radius:14px 14px 0 0!important
}
.ts-deals-page .ts-deals-filter-body{
flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;padding:10px 12px 8px!important;background:#fff!important
}
.ts-deals-page .ts-deals-filter-footer{
display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;
flex:0 0 auto!important;position:relative!important;z-index:3!important;
padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
border-top:1px solid #e7e7e7!important;background:#fff!important;
box-shadow:0 -4px 12px rgba(0,0,0,.06)!important
}
.ts-deals-page .ts-deals-clear,
.ts-deals-page .ts-deals-apply{
display:flex!important;align-items:center!important;justify-content:center!important;
width:100%!important;min-height:40px!important;margin:0!important;padding:7px 8px!important;
border-radius:8px!important;text-decoration:none!important;font-size:11px!important;font-weight:800!important;
letter-spacing:.25px!important;text-transform:uppercase!important;box-sizing:border-box!important
}
.ts-deals-page .ts-deals-clear{border:1px solid var(--technosys-accent)!important;background:#fff!important;color:var(--technosys-accent)!important}
.ts-deals-page .ts-deals-apply{border:1px solid var(--technosys-accent)!important;background:var(--technosys-accent)!important;color:#fff!important}
.ts-deals-page .ts-deals-apply:hover{background:var(--technosys-accent-strong)!important;border-color:var(--technosys-accent-strong)!important}
.ts-deals-page .ts-deal-picture{height:104px!important;min-height:104px!important;max-height:104px!important;padding:4px!important}
.ts-deals-page .ts-deal-picture>a{height:96px!important;min-height:96px!important;max-height:96px!important}
.ts-deals-page .ts-deal-image{max-height:96px!important}
.ts-deals-page .ts-deal-title{height:32px!important;min-height:32px!important;max-height:32px!important}
.ts-deals-page .ts-deal-price-row{height:26px!important;min-height:26px!important;max-height:26px!important;overflow:hidden!important}
.ts-deals-page .ts-deal-stock{height:14px!important;min-height:14px!important;max-height:14px!important;margin-top:2px!important}
.ts-deals-page .ts-deal-secondary-action{min-height:27px!important;padding:3px 4px!important;font-size:9.5px!important;gap:3px!important}
.ts-deals-page .ts-deal-action-icon{width:12px!important;height:12px!important;flex-basis:12px!important}
/* The compact theme mobile header can stick; delivery/status information must always scroll away. */
body.ts-sticky-mobile .ts-ecom-headerbar[data-ts-info-bar="1"]{position:relative!important;top:auto!important;z-index:2!important;box-shadow:none!important}
body.ts-sticky-mobile .ts-sticky-shell[data-ts-sticky-managed="1"]{max-height:125px!important;overflow:visible!important}
}
/* ==========================================================================
R8 26.9.13.2 - STABLE RUNTIME FIX
Proven F12 fixes: SPC width/respondTo stability, desktop sticky persistence,
Deals-only mobile spacing, left-aligned info bar and cross-device actions.
========================================================================== */
/* Desktop delivery/location bar should begin from the store content edge instead
of being centered inside a 1500px cap on wider screens. */
.ts-info-inner{
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
}
/* Sticky positioning is mode-specific. Desktop uses a fixed element plus a real
placeholder so it cannot disappear when an ancestor/header wrapper ends. */
.ts-sticky-shell,
.ts-sticky-companion{
position:relative!important;
top:auto!important;
}
.ts-sticky-placeholder{
display:none;
width:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
border:0!important;
}
@media(max-width:767px){
body.ts-sticky-mobile .ts-sticky-shell[data-ts-sticky-managed="1"]{
position:sticky!important;
top:var(--ts-sticky-top,0px)!important;
z-index:10020!important;
box-sizing:border-box!important;
background:var(--technosys-surface,#fff)!important;
isolation:isolate!important;
box-shadow:0 4px 12px rgba(0,0,0,.10)!important;
}
}
/* 26.9.13.4: F12-proven scope correction. Only rows=1 Custom Product Collection
sliders receive the 245px width release. rows>1 Smart/Category compact layouts remain
fully Emporium-owned and therefore never match these selectors. */
@media(min-width:981px){
.ts-product-carousel-runtime-proven .slick-slide{
max-width:none!important;
min-width:0!important;
box-sizing:border-box!important;
}
.ts-product-carousel-runtime-proven .slick-slide>div,
.ts-product-carousel-runtime-proven .slick-slide .item-box{
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
}
}
/* Theme .master-wrapper-content adds mobile top padding. Scope the reset to the
Deals route only so other pages keep the Emporium spacing. */
@media(max-width:767px){
body.ts-deals-active .master-wrapper-content{
padding-top:0!important;
}
/* Same Wishlist/Compare visual language on desktop and mobile. Only the card
layout itself remains responsive. */
.ts-deals-page .ts-deal-secondary-action{
min-height:34px!important;
padding:5px 8px!important;
font-size:11px!important;
line-height:1!important;
gap:5px!important;
border-radius:4px!important;
font-weight:700!important;
}
.ts-deals-page .ts-deal-action-icon{
width:15px!important;
height:15px!important;
flex:0 0 15px!important;
}
}
/* ==========================================================================
R8 26.9.13.3 - RUNTIME-PROVEN UI FIX
Live F12-approved desktop sticky wrapper, carousel sizing and header parity.
========================================================================== */
/* Desktop sticky has one owner only. The original header/menu nodes stay inside
this wrapper and are never independently fixed. */
.ts-single-sticky-wrapper{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
background:var(--technosys-surface,#fff)!important;
box-sizing:border-box!important;
}
.ts-single-sticky-placeholder{
display:none;
width:100%!important;
min-width:0!important;
height:0;
margin:0!important;
padding:0!important;
border:0!important;
}
@media(min-width:768px){
body.ts-sticky-desktop .ts-single-sticky-wrapper.ts-single-sticky-active{
position:fixed!important;
top:var(--ts-sticky-top,0px)!important;
left:0!important;
right:0!important;
width:100%!important;
max-width:none!important;
margin:0!important;
transform:none!important;
z-index:10020!important;
box-shadow:0 4px 12px rgba(0,0,0,.10)!important;
}
.ts-single-sticky-wrapper .header-lower,
.ts-single-sticky-wrapper .header-menu{
position:relative!important;
top:auto!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
width:100%!important;
max-width:none!important;
transform:none!important;
visibility:visible!important;
opacity:1!important;
}
.ts-single-sticky-wrapper .header-menu{display:block!important}
/* Desktop reuses the exact mobile location-pin visual language. */
.ts-location-pin{
width:36px!important;
height:36px!important;
flex:0 0 36px!important;
border-radius:50%!important;
background:#fdebed!important;
color:var(--technosys-accent-strong)!important;
display:grid!important;
place-items:center!important;
}
.ts-location-pin svg{
width:18px!important;
height:18px!important;
display:block!important;
fill:currentColor!important;
}
}
@media(max-width:767px){
/* Mobile reuses the same native Deals tag SVG that desktop already renders. */
.ts-deals-link svg{
display:block!important;
width:15px!important;
height:15px!important;
fill:currentColor!important;
}
}
/* ==========================================================================
R8 26.9.13.4 - SPC SCOPE CORRECTION
Runtime-proven boundary: rows=1 Custom carousel only; rows>1 Smart/Category
compact collections remain native Emporium. No broad .spc-body slide override.
========================================================================== */
/* ==========================================================================
R8 26.9.14.4 - DEALS SERVER PAGING / STATE CONTROLS
Scoped to Deals only. Smart/Category SPC layout changes from 26.9.14.x are
intentionally reverted to the 26.9.13.4 theme-owned rows>1 behavior.
========================================================================== */
.ts-deals-head-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.ts-deals-page-size,.ts-deals-sort{display:flex;align-items:center;gap:7px;font-weight:600;color:#444}
.ts-deals-page-size select,.ts-deals-sort select{min-height:36px;padding:5px 30px 5px 9px;border:1px solid #d7dbe0;border-radius:6px;background:#fff;color:#222}
.ts-deals-showing{margin-top:3px;font-size:12px;color:#777}
.ts-deals-pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:24px 0 8px;padding:0}
.ts-deals-page-link{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border:1px solid #d9dde2;border-radius:6px;background:#fff;color:#333!important;text-decoration:none!important;font-weight:650;box-sizing:border-box}
.ts-deals-page-link:hover{border-color:var(--technosys-accent,#d71920);color:var(--technosys-accent,#d71920)!important}
.ts-deals-page-link.ts-current{border-color:var(--technosys-accent,#d71920);background:var(--technosys-accent,#d71920);color:#fff!important;cursor:default}
.ts-deals-page-link.ts-disabled{opacity:.45;cursor:not-allowed}
.ts-deals-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:36px;color:#777}
@media(max-width:767px){
.ts-deals-page .ts-deals-results-head{width:100%!important}
.ts-deals-head-controls{width:100%;justify-content:space-between;gap:8px}
.ts-deals-page-size,.ts-deals-sort{font-size:11px;flex:1 1 auto}
.ts-deals-page-size select,.ts-deals-sort select{min-width:0;max-width:100%;font-size:11px}
.ts-deals-pagination{gap:4px;margin-top:18px}
.ts-deals-page-link{min-width:32px;height:34px;padding:0 8px;font-size:11px}
.ts-deals-page-prev,.ts-deals-page-next{min-width:62px}
}
/* ==========================================================================
R8 26.9.18.2 - STOREFRONT ENGAGEMENT + THEME COLORS
Plugin-owned WhatsApp, app-store download UI and top announcement strip.
Unique ts-* classes prevent theme leakage; legacy AUOR selectors are only
suppressed when the matching plugin feature is actively enabled.
========================================================================== */
.ts-top-announcement{
display:block;
width:100%;
box-sizing:border-box;
margin:0;
padding:14px 12px;
background:var(--ts-top-message-bg,#b31313);
color:var(--ts-top-message-text,#fff);
border-top:1px solid var(--ts-top-message-border,#b31313);
border-bottom:1px solid var(--ts-top-message-border,#b31313);
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
font-weight:700;
line-height:1.3;
letter-spacing:1px;
text-transform:uppercase;
position:relative;
z-index:10010;
}
@media(max-width:768px){
.ts-top-announcement{display:none}
.ts-top-announcement.ts-mobile-enabled{display:block;padding:9px 40px 9px 12px;font-size:12px;letter-spacing:.5px}
}
.ts-whatsapp-float{
position:fixed!important;
right:20px!important;
bottom:20px!important;
width:60px!important;
height:60px!important;
border-radius:50%!important;
background:#25D366!important;
color:#fff!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
box-shadow:0 8px 20px rgba(0,0,0,.25)!important;
z-index:999999!important;
text-decoration:none!important;
transition:transform .3s ease,background-color .3s ease!important;
animation:tsWhatsappPulse 2s infinite;
}
.ts-whatsapp-float:hover{transform:scale(1.1)!important;background:#20ba5a!important;color:#fff!important}
.ts-whatsapp-float svg{width:34px!important;height:34px!important;display:block!important;fill:currentColor!important}
@keyframes tsWhatsappPulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}
70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
@media(max-width:768px){
.ts-whatsapp-float{width:55px!important;height:55px!important;right:15px!important;bottom:15px!important}
.ts-whatsapp-float svg{width:30px!important;height:30px!important}
}
.ts-floating-app-badges{
position:fixed!important;
right:20px!important;
bottom:20px!important;
display:none!important;
flex-direction:column!important;
align-items:flex-end!important;
gap:8px!important;
z-index:999998!important;
}
.ts-floating-app-badges.ts-has-whatsapp{bottom:95px!important}
.ts-floating-app-badges .ts-float-app-btn{display:block!important;line-height:0!important;transition:transform .2s ease!important}
.ts-floating-app-badges .ts-float-app-btn:hover{transform:scale(1.05)!important}
.ts-floating-app-badges img{display:block!important;width:135px!important;height:45px!important;object-fit:fill!important;border-radius:6px!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))!important}
.ts-floating-app-badges img[alt="App Store"]{width:134px!important}
@media(min-width:769px){.ts-floating-app-badges{display:flex!important}}
.ts-mobile-app-download-banner{display:none!important}
@media(max-width:768px){
.ts-mobile-app-download-banner.ts-mobile-app-ready{
width:100%!important;
min-height:52px!important;
box-sizing:border-box!important;
padding:6px 42px 6px 12px!important;
margin:0!important;
background:var(--ts-app-banner-bg,#b31313)!important;
color:var(--ts-app-banner-text,#fff)!important;
border-top:1px solid var(--ts-app-banner-border,#b31313)!important;
border-bottom:1px solid var(--ts-app-banner-border,#b31313)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
position:relative!important;
z-index:10030!important;
}
.ts-mobile-app-copy{font-size:12px!important;font-weight:700!important;letter-spacing:.3px!important;text-transform:uppercase!important;white-space:nowrap!important}
.ts-mobile-app-store-links{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.ts-mobile-store-link{display:none!important;line-height:0!important}
.ts-mobile-store-link img{display:block!important;width:auto!important;height:34px!important;max-width:118px!important;object-fit:contain!important}
.ts-mobile-app-download-banner.ts-device-android .ts-mobile-store-android{display:block!important}
.ts-mobile-app-download-banner.ts-device-ios .ts-mobile-store-ios{display:block!important}
.ts-mobile-app-download-banner.ts-device-other .ts-mobile-store-link{display:block!important}
.ts-mobile-app-close{
position:absolute!important;right:10px!important;top:50%!important;transform:translateY(-50%)!important;
width:30px!important;height:30px!important;border:0!important;background:transparent!important;color:var(--ts-app-banner-text,#fff)!important;
font-size:28px!important;line-height:28px!important;font-weight:400!important;cursor:pointer!important;padding:0!important;margin:0!important;
}
}
@media(max-width:420px){
.ts-mobile-app-download-banner.ts-mobile-app-ready{gap:6px!important;padding-left:8px!important}
.ts-mobile-app-copy{font-size:10.5px!important}
.ts-mobile-store-link img{height:30px!important;max-width:104px!important}
}
/* Migration safety: when plugin equivalents are active, hide known legacy AUOR/JKS markup. */
html.ts-whatsapp-plugin-active .whatsapp-float-btn,
html.ts-whatsapp-plugin-active .whatsapp-float{display:none!important}
html.ts-app-download-plugin-active .floating-app-badges:not(.ts-floating-app-badges){display:none!important}
html.ts-top-message-plugin-active .master-wrapper-page::before{display:none!important;content:none!important}
/* ==========================================================================
26.9.27.1 CENTRALIZED EMPORIUM LAYOUT
--------------------------------------------------------------------------
Approved fixed layout migrated from the former Emporium Custom Head Styles.
Layout/spacing/responsive behavior is intentionally NOT admin-editable.
Only --ts-storefront-theme is client-configurable. WhatsApp, app badges,
top header message and the plugin-owned sticky implementation are intentionally
excluded here because 26.9.18.2 already owns those features.
========================================================================== */
/* ==========================================================================
0. ALL CATEGORIES ICON FIX (Updated)
========================================================================== */
/* Agar icon span ke andar hai ya class ke sath hai */
.category-navigation-title::before,
.category-navigation-title i,
.category-navigation-title span[class*="icon"] {
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
}
/* Agar ye font-icon hai to color force karein */
.category-navigation-title::before,
.category-navigation-title i {
color: #FFFFFF !important;
}
/* ==========================================================================
1. DESKTOP HEADER & NAVIGATION (Sirf Bare Screens Par)
========================================================================== */
@media (min-width: 1001px) {
.header-menu,
.category-navigation-list-wrapper,
.category-navigation .title,
.menu-title {
background-color: var(--ts-storefront-theme,#e80109) !important;
}
.header-menu a, .header-menu span, .category-navigation-title {
color: #FFFFFF !important;
font-weight: 700 !important;
}
.category-navigation-title,
.header-menu .category-navigation-title,
.category-navigation .title {
background-color: var(--ts-storefront-theme,#e80109) !important;
border-right: 2px solid #FFFFFF !important;
}
ul.category-navigation-list, .category-navigation-list ul, .submenus, .submenus ul {
background-color: #f0f2f1 !important;
border: 1px solid var(--ts-storefront-theme,#e80109) !important;
}
.category-navigation-list li a, .submenus li a {
color: #000000 !important;
}
.category-navigation-list li a:hover {
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #FFFFFF !important;
}
.header-logo, .header-logo a {
display: flex !important;
align-items: center !important;
height: auto !important;
}
.header-logo img {
max-width: 220px !important;
max-height: 65px !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
}
/* ==========================================================================
2. GLOBAL UI STYLES & CATEGORY BOXES ENGINE
========================================================================== */
.search-box .search-box-button,
.search-box-button {
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #FFFFFF !important;
}
ul.navigation {
border-bottom: 2px solid var(--ts-storefront-theme,#e80109) !important;
margin-bottom: 15px !important;
}
ul.navigation li.tab {
background-color: #f1f1f1 !important;
color: #000000 !important;
border: 1px solid #ddd !important;
border-bottom: none !important;
padding: 8px 15px !important;
cursor: pointer !important;
}
ul.navigation li.tab.active {
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #FFFFFF !important;
border-color: var(--ts-storefront-theme,#e80109) !important;
}
.category-grid, .home-page-category-grid, .item-box, .category-item {
overflow: visible !important;
}
.category-item {
position: relative !important;
display: flex !important;
flex-direction: column !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.category-item .title {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #FFFFFF !important;
padding: 1px 10px !important;
margin: 0 !important;
border-radius: 0 0 4px 4px !important;
min-height: 45px !important;
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
z-index: 99 !important;
}
.category-item .title a,
.category-item a[title*="Show products in category"] {
display: block !important;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.product-box-add-to-cart-button, .add-to-cart-button {
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 4px !important;
}
.search-box input.search-box-text {
border-radius: 20px 0 0 20px !important;
}
.search-box .search-box-button {
border-radius: 0 20px 20px 0 !important;
}
img[alt*="Picture of"], .picture img, .product-item img, .item-box img {
object-fit: contain !important;
background-color: #ffffff !important;
}
/* ==========================================================================
3. DESKTOP ONLY: FULL-WIDTH SLIM FOOTER ENGINE
========================================================================== */
.footer img[alt="footer_logo"] {
max-width: 200px !important;
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 0 10px 0 !important;
}
.footer {
background-color: var(--ts-storefront-theme,#e80109) !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.footer-lower {
background-color: var(--ts-storefront-theme,#e80109) !important;
border-top: none !important; /* Pehle yahan border tha, ab none kar diya */
padding: 5px 0 !important; /* Space kam kar di */
}
.footer-lower a, .footer-lower span, .footer-lower div {
color: #ffffff !important;
}
@media (min-width: 1001px) {
.footer {
padding: 5px 0 0 0 !important;
}
.footer div[class*="container"],
.footer .container,
.footer .footer-upper,
.footer .footer-middle,
.footer .footer-blocks {
display: flex !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 4% 20px 4% !important;
margin: 0 !important;
justify-content: space-between !important;
align-items: stretch !important;
box-sizing: border-box !important;
height: auto !important;
}
.footer-upper > div:first-child,
.footer-middle > div:first-child,
.footer-blocks .footer-block:first-child {
flex: 0 0 28% !important;
background: transparent !important;
padding-right: 40px !important;
margin: 0 !important;
text-align: left !important;
box-sizing: border-box !important;
}
.footer-block:first-child .title strong,
.footer-middle > div:first-child .title strong {
color: #FFFFFF !important;
font-size: 16px !important;
text-align: left !important;
display: block !important;
margin-bottom: 8px !important;
}
.footer-store-description, .footer-block:first-child p {
color: #FFFFFF !important;
font-size: 13px !important;
line-height: 1.5 !important;
text-align: left !important;
}
.footer-upper > div:not(:first-child),
.footer-middle > div:not(:first-child),
.footer-blocks .footer-block:not(:first-child) {
background-color: #EAEAEA !important;
padding: 15px 20px !important;
margin: 0 !important;
flex: 1 !important;
box-sizing: border-box !important;
}
.footer-upper > div:not(:first-child):not(:last-child),
.footer-middle > div:not(:first-child):not(:last-child),
.footer-blocks .footer-block:not(:first-child):not(:last-child) {
border-right: 1px solid #D1D1D1 !important;
}
.footer-block:not(:first-child) .title strong,
.footer-middle > div:not(:first-child) .title strong {
color: var(--ts-storefront-theme,#e80109) !important;
font-size: 14px !important;
display: block !important;
margin-bottom: 10px !important;
}
.footer-block:not(:first-child) ul a,
.footer-block:not(:first-child) .list a {
color: #333333 !important;
font-size: 13px !important;
line-height: 1.8 !important;
}
.footer-block:not(:first-child) ul a:hover,
.footer-block:not(:first-child) .list a:hover {
color: var(--ts-storefront-theme,#e80109) !important;
}
}
/* ==========================================================================
4. MOBILE ONLY: SLEEK GREY GRID ACCORDIONS & CENTER ALIGN
========================================================================== */
@media (max-width: 1000px) {
.footer img[alt="footer_logo"] {
margin: 0 auto 10px auto !important;
}
.footer {
padding: 5px 15px 5px 15px !important;
text-align: center !important;
background-color: var(--ts-storefront-theme,#e80109) !important;
}
.footer div[class*="container"],
.footer .container,
.footer .footer-upper,
.footer .footer-middle,
.footer .footer-blocks {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
.footer-upper > div:first-child,
.footer-middle > div:first-child,
.footer-blocks .footer-block:first-child {
display: block !important;
width: 100% !important;
background: transparent !important;
padding: 0 15px 15px 15px !important;
margin-bottom: 15px !important;
text-align: center !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.footer-block:first-child .title strong,
.footer-middle > div:first-child .title strong {
color: #FFFFFF !important;
font-size: 15px !important;
text-align: center !important;
margin-bottom: 6px !important;
letter-spacing: 1px !important;
}
.footer-store-description, .footer-block:first-child p {
color: #FFFFFF !important;
font-size: 11.5px !important;
line-height: 1.5 !important;
text-align: center !important;
max-width: 90% !important;
margin: 0 auto !important;
opacity: 0.9 !important;
}
.footer-upper > div:not(:first-child),
.footer-middle > div:not(:first-child),
.footer-blocks .footer-block:not(:first-child) {
background-color: #EAEAEA !important;
padding: 4px 12px 10px 12px !important;
margin: 0 0 10px 0 !important;
text-align: center !important;
border-radius: 4px !important;
border: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
height: auto !important;
min-height: 0 !important;
}
.footer-block .title,
.footer-middle .title {
background-color: transparent !important;
border: none !important;
padding: 8px 0 !important;
margin: 0 !important;
height: auto !important;
line-height: normal !important;
}
.footer-block:not(:first-child) .title strong,
.footer-middle > div:not(:first-child) .title strong {
color: var(--ts-storefront-theme,#e80109) !important;
font-size: 14px !important;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0 !important;
padding: 0 !important;
}
.footer-block .list,
.footer-block ul,
.footer-block div[class*="list"] {
background-color: transparent !important;
padding: 4px 0 !important;
margin: 0 !important;
list-style: none !important;
border: none !important;
box-shadow: none !important;
}
.footer-block:not(:first-child) ul li,
.footer-block:not(:first-child) .list li {
padding: 5px 0 !important;
background-color: transparent !important;
}
.footer-block:not(:first-child) ul a,
.footer-block:not(:first-child) .list a,
.footer-block:not(:first-child) .list li a {
color: #333333 !important;
font-size: 13px !important;
text-decoration: none !important;
background-color: transparent !important;
display: inline-block !important;
}
.footer-block:not(:first-child) ul a:hover,
.footer-block:not(:first-child) .list a:hover {
color: var(--ts-storefront-theme,#e80109) !important;
}
}
/* ==========================================================================
5. MOBILE MENU & ICON FIX (Final Version)
========================================================================== */
@media (max-width: 1000px) {
/* 1. Mobile Menu Container Fix */
.mean-container .mean-nav,
.mean-container .mean-bar,
.menu-title {
background-color: var(--ts-storefront-theme,#e80109) !important; /* Centralized theme color */
}
/* 2. Menu Items Text & Background */
.mean-container .mean-nav ul li a,
.mean-container .mean-nav ul li span,
.sublist li a {
background-color: #ffffff !important;
color: #333333 !important; /* Dark text for visibility */
border-bottom: 1px solid #e0e0e0 !important;
}
/* 3. Icons Fix (Visible Again) */
/* Mobile mein icons jo white background par gayab ho rahe the */
.mean-container .mean-nav ul li a span,
.plus-button {
display: block !important;
filter: none !important; /* Invert hataya kyunki white background pe white icon gayab ho raha tha */
color: #333333 !important; /* Dark color ke icons */
}
/* 4. Menu Header Title & Cross Icon */
.menu-title span,
.mean-container .mean-bar a.meanmenu-reveal {
color: #ffffff !important;
}
/* 5. Back Button Fix */
.back-button, .back-button span {
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #ffffff !important;
font-weight: bold !important;
}
}
/* ==========================================================================
6. FORCE CLEAN TWITTER AND INJECT ORIGINAL DARK TIKTOK ICON
========================================================================== */
.footer .social-sharing a::before,
.footer-middle .social a::before,
.footer .social-sharing a::after,
.footer-middle .social a::after {
content: "" !important;
display: none !important;
}
.footer .social-sharing a,
.footer-middle .social a {
display: inline-block !important;
width: 24px !important;
height: 24px !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
.footer .social-sharing a.twitter,
.footer-middle .social a[href*="tiktok.com"],
.footer .social-sharing a[href*="tiktok.com"] {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.footer-middle .social a[href*="facebook.com"],
.footer .social-sharing a[href*="facebook.com"] {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.footer-middle .social a[href*="instagram.com"],
.footer .social-sharing a[href*="instagram.com"] {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* ==========================================================================
7. EMERGENCY TOPICS & "WELCOME TO AUORSUPERMARKET" HIDE RULES
========================================================================== */
.topic-block,
.topic-block-body,
.home-page .topic-block,
.master-wrapper-content .home-page > h2,
.home-page-main-slider + h2,
.master-wrapper-main > h2 {
display: none !important;
}
/* ==========================================================================
MOBILE MENU ICON COLOR FIX
========================================================================== */
@media (max-width: 1000px) {
.menu-title span,
.menu-title::before,
.menu-title i {
color: #FFFFFF !important;
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
}
}
/* --- OVERRIDE EVERYTHING FOR FOOTER --- */
/* 1. Remove that top black line & force background globally */
.footer, .footer-middle, .footer-lower, .jks-custom-footer-middle {
background-color: var(--ts-storefront-theme,#e80109) !important;
border: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. Force the column to the extreme left */
.jks-brand-info-column {
padding-left: 0 !important;
margin-left: 0 !important;
width: 100% !important; /* Agar ye flex mein hai to flex: 1 !important; */
border: 0 !important;
}
/* 3. Remove space inside the logo/description area */
.footer-logo {
margin: 0 !important;
padding: 0 !important;
}
.footer-store-description {
margin: 0 !important;
padding: 0 !important;
}
/* 4. Agar ye line theme ki main class se aa rahi hai, to ise bhi target karo */
.footer-middle, .jks-custom-footer-middle {
background-color: var(--ts-storefront-theme,#e80109) !important;
border-top: 0px solid transparent !important;
}
/* --- FINAL COMPLETE MOBILE MENU CSS --- */
@media (max-width: 1000px) {
/* 1. Container & Main Menu Background (White) */
.header-menu.categories-in-side-panel,
.header-menu.categories-in-side-panel ul li a,
.header-menu.categories-in-side-panel ul li span,
.header-menu.categories-in-side-panel .category-navigation-title,
.header-menu.categories-in-side-panel .top-menu li a {
background-color: #ffffff !important;
color: #000000 !important;
border-top: none !important;
text-decoration: none !important;
}
/* 2. Cyan Hover Effect (For Categories & Links) */
.header-menu.categories-in-side-panel ul li a:hover,
.header-menu.categories-in-side-panel ul li a.active,
.header-menu.categories-in-side-panel ul li span:hover,
.header-menu.categories-in-side-panel .category-navigation-title:hover,
.header-menu.categories-in-side-panel .top-menu li a:hover {
background-color: var(--ts-storefront-theme,#e80109) !important; /* Centralized theme color */
color: #ffffff !important; /* White text */
opacity: 1 !important;
}
/* 3. Wishlist & Compare Buttons Fix */
.ico-wishlist, .ico-compare {
display: block !important;
background-color: #ffffff !important;
color: #000000 !important;
padding: 10px !important;
border: none !important;
}
.wishlist-label, .wishlist-qty {
background-color: #ffffff !important;
color: #000000 !important;
}
/* 4. Wishlist & Compare Hover Effect */
.ico-wishlist:hover, .ico-compare:hover {
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #ffffff !important;
}
.ico-wishlist:hover .wishlist-label,
.ico-wishlist:hover .wishlist-qty,
.ico-compare:hover .compare-label {
background-color: var(--ts-storefront-theme,#e80109) !important;
color: #ffffff !important;
}
/* 5. Plus/Minus Buttons Icon Fix */
.header-menu.categories-in-side-panel .plus-button {
border-color: #000000 !important;
color: #000000 !important;
}
.header-menu.categories-in-side-panel ul li a:hover .plus-button {
color: #ffffff !important;
border-color: #ffffff !important;
}
}
/* Mobile Menu Arrow/Plus Button Color Fix */
@media (max-width: 1000px) {
/* Box ka background Teal/Cyan */
.header-menu.categories-in-side-panel .plus-button {
background-color: var(--ts-storefront-theme,#e80109) !important;
border: 1px solid var(--ts-storefront-theme,#e80109) !important;
}
/* Arrow icon ka color Black (jo aapko chahiye) */
.header-menu.categories-in-side-panel .plus-button::before,
.header-menu.categories-in-side-panel .plus-button {
color: #ffffff !important; /* Arrow Black */
}
}
/* --- MOBILE MENU CLOSE HEADER FIX --- */
@media (max-width: 1000px) {
/* Menu header ka background aur text color fix */
.header-menu.categories-in-side-panel .close-menu {
background-color: var(--ts-storefront-theme,#e80109) !important; /* Centralized theme color background */
border-bottom: 1px solid #eeeeee !important;
padding: 15px !important;
}
/* "MENU" aur "Close" text ka color White kar diya hai */
.header-menu.categories-in-side-panel .close-menu .close-menu-btn,
.header-menu.categories-in-side-panel .close-menu .close-menu-text {
color: #ffffff !important; /* Text ab White ho gaya */
font-weight: bold !important;
}
}
/*Smart Collection View All Button Related*/
/* 1. Parent container ko relative reference banayein */
.category-products {
position: relative !important;
padding-bottom: 35px !important; /* Niche button ke liye space */
}
/* 2. View All link ko right-bottom (product grid ke niche) place karein */
.category-products a.view-all,
a.view-all {
position: absolute !important;
bottom: 5px !important;
right: 25px !important; /* Product grid ke bottom-right corner par positioning */
left: auto !important;
/* Typography & Styling */
display: inline-block !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--ts-storefront-theme,#e80109) !important; /* Centralized theme color */
text-transform: uppercase !important;
text-decoration: underline !important;
z-index: 99 !important;
}
.category-products a.view-all:hover {
color: #000000 !important;
}
/* ==========================================================================
MOBILE FOOTER STORE DESCRIPTION CENTER FIX (MAX-WIDTH: 1024PX)
========================================================================== */
@media (max-width: 1024px) {
/* Parent Container Reset */
.footer-upper,
.footer-block,
.footer-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Target Exact Element: .footer-store-description */
.footer-store-description {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding-left: 15px !important; /* Equal left spacing */
padding-right: 15px !important; /* Equal right spacing */
text-align: center !important; /* Perfectly centered text */
box-sizing: border-box !important;
float: none !important;
}
/* Logo Image Centering Above Description */
.footer-block img,
.footer-store-description img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ==========================================================================
MOBILE FOOTER SOCIAL ICONS TOP GAP FIX (MAX-WIDTH: 1024PX)
========================================================================== */
@media (max-width: 1024px) {
/* 1. Main Social Container Margins & Padding Reset */
.socials-and-payments,
.footer-lower .socials-and-payments {
padding-top: 5px !important; /* Default badi padding ko kam karein */
margin-top: 0 !important; /* Extra top margin reset */
padding-bottom: 10px !important;
}
/* 2. Inner Social Icons Wrapper Fix */
.social-icons,
.socials-and-payments .social-icons {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 3. "Follow us" Title Spacing */
.social-icons .title,
.socials-and-payments .title {
margin-top: 0 !important;
margin-bottom: 5px !important;
padding-top: 0 !important;
}
/* 4. Social Icons List Spacing */
ul.social-sharing {
margin-top: 5px !important;
padding-top: 0 !important;
}
}
/* Mobile view mein back button keliye*/
/* Desktop Screen Par Hide */
.mobile-header-back-btn {
display: none;
}
/* Mobile View Only */
@media screen and (max-width: 768px) {
/* Responsive Wrapper Layout Fix */
.responsive-nav-wrapper {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 0 8px !important;
box-sizing: border-box !important;
position: relative !important;
}
/* Left Side Group (Hamburger Menu + Back Button) */
.responsive-nav-wrapper .left-box,
.responsive-nav-wrapper .menu-title,
.responsive-nav-wrapper .search-wrap {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
/* Back Button Styling */
.mobile-header-back-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background-color: var(--ts-storefront-theme,#e80109);
border-radius: 6px;
text-decoration: none;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.mobile-header-back-btn svg {
display: block;
fill: #ffffff;
}
/* Logo Center Alignment Without Overlapping Right Icons */
.responsive-nav-wrapper .mobile-logo {
position: static !important;
transform: none !important;
flex: 1 1 auto !important;
text-align: center !important;
margin: 0 8px !important;
overflow: hidden !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.responsive-nav-wrapper .mobile-logo a.logo {
display: inline-block !important;
max-width: 100% !important;
}
.responsive-nav-wrapper .mobile-logo img {
max-height: 32px !important;
width: auto !important;
object-fit: contain !important;
vertical-align: middle !important;
}
/* Right Side Icons Fix (Cart, Account, Search) */
.responsive-nav-wrapper .right-box,
.responsive-nav-wrapper .header-links-wrapper {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
z-index: 10 !important;
}
}
/* Home Page Par Back Button Specific Hide Rule */
.home-page .mobile-header-back-btn,
.home-page-body .mobile-header-back-btn {
display: none !important;
}
/* Replace Pinterest icon with LinkedIn SVG Icon */
/* Force show Pinterest container */
.social-icons .networks .pinterest,
.social-icons .social .pinterest,
.social-icons li.pinterest {
display: inline-block !important;
visibility: visible !important;
}
/* Force LinkedIn Icon as background on Pinterest link */
.social-icons .networks a.pinterest,
.social-icons .social a.pinterest,
.social-sharing a.pinterest,
a.pinterest {
display: inline-block !important;
visibility: visible !important;
width: 24px !important;
height: 24px !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
font-size: 0 !important;
text-indent: -9999px !important;
}
/* Hover color change to LinkedIn Blue */
.social-icons .networks a.pinterest:hover,
.social-icons .social a.pinterest:hover,
a.pinterest:hover {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* ===== 26.9.28.1 APPROVED UI PROMOTION START ===== */
/* ============================================================================
TECHNOSYS APPROVED STOREFRONT UI - PLUGIN OWNED (PROMOTED FROM PILOT V6.10.1)
Target: nopCommerce 4.20 + Emporium + Technosys.EcommerceEnhancements 26.9.28.1
IMPORTANT:
- REMOVE the entire previous V1/V2/V3/V4/V5/V6/V6.1 custom CSS.
- Promoted from the approved storefront pilot into plugin-owned CSS.
- This file is intentionally clean: no stacked legacy override layers.
- UI only. No business logic changes.
============================================================================ */
:root {
--ts-ui-primary: var(--ts-storefront-theme, #e80109);
--ts-ui-hover: var(--ts-storefront-theme-strong, #b90006);
--ts-ui-text: #111111;
--ts-ui-muted: #666666;
--ts-ui-border: #e7e7e7;
--ts-ui-surface: #ffffff;
--ts-ui-soft: #fafafa;
--ts-ui-radius: 8px;
--ts-ui-primary-soft: #fff3f3;
}
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
:root {
--ts-ui-primary-soft: color-mix(in srgb, var(--ts-ui-primary) 8%, white);
}
}
/* ============================================================================
1. GLOBAL TEXT / CLEAN SURFACES
============================================================================ */
html.ts-centralized-storefront-theme,
html.ts-centralized-storefront-theme body,
html.ts-centralized-storefront-theme .page,
html.ts-centralized-storefront-theme .page-body,
html.ts-centralized-storefront-theme .master-column-wrapper {
color: var(--ts-ui-text) !important;
}
html.ts-centralized-storefront-theme h1,
html.ts-centralized-storefront-theme h2,
html.ts-centralized-storefront-theme h3,
html.ts-centralized-storefront-theme h4,
html.ts-centralized-storefront-theme h5,
html.ts-centralized-storefront-theme .page-title h1 {
color: var(--ts-ui-text) !important;
}
/* Do not add generic outlines/shadows around checkout/static sections. */
html.ts-centralized-storefront-theme .checkout-page .section,
html.ts-centralized-storefront-theme .checkout-page .checkout-data,
html.ts-centralized-storefront-theme .checkout-page .order-review-data,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content,
html.ts-centralized-storefront-theme .order-completed-page .section,
html.ts-centralized-storefront-theme .order-details-page .section {
box-shadow: none !important;
outline: 0 !important;
}
/* ============================================================================
2. SEARCH BUTTON - CLEAN VECTOR ICON
============================================================================ */
html.ts-centralized-storefront-theme .search-box input.search-box-text {
border-color: var(--ts-ui-border) !important;
color: var(--ts-ui-text) !important;
}
html.ts-centralized-storefront-theme .search-box .search-box-button,
html.ts-centralized-storefront-theme .search-box-button {
background-color: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 23px 23px !important;
color: transparent !important;
text-shadow: none !important;
text-indent: -9999px !important;
overflow: hidden !important;
}
html.ts-centralized-storefront-theme .search-box .search-box-button:hover,
html.ts-centralized-storefront-theme .search-box-button:hover {
background-color: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
}
/* ============================================================================
3. BUTTON COLORS ONLY - KEEP THEME'S ORIGINAL SIZE/LAYOUT
============================================================================ */
html.ts-centralized-storefront-theme .button-1,
html.ts-centralized-storefront-theme .button-2,
html.ts-centralized-storefront-theme input.button-1,
html.ts-centralized-storefront-theme input.button-2,
html.ts-centralized-storefront-theme button.button-1,
html.ts-centralized-storefront-theme button.button-2,
html.ts-centralized-storefront-theme .checkout-button,
html.ts-centralized-storefront-theme .confirm-order-next-step-button,
html.ts-centralized-storefront-theme .payment-info-next-step-button,
html.ts-centralized-storefront-theme .payment-method-next-step-button,
html.ts-centralized-storefront-theme .shipping-method-next-step-button,
html.ts-centralized-storefront-theme .new-address-next-step-button {
background-color: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .button-1:hover,
html.ts-centralized-storefront-theme .button-2:hover,
html.ts-centralized-storefront-theme input.button-1:hover,
html.ts-centralized-storefront-theme input.button-2:hover,
html.ts-centralized-storefront-theme button.button-1:hover,
html.ts-centralized-storefront-theme button.button-2:hover,
html.ts-centralized-storefront-theme .checkout-button:hover,
html.ts-centralized-storefront-theme .confirm-order-next-step-button:hover,
html.ts-centralized-storefront-theme .payment-info-next-step-button:hover,
html.ts-centralized-storefront-theme .payment-method-next-step-button:hover,
html.ts-centralized-storefront-theme .shipping-method-next-step-button:hover,
html.ts-centralized-storefront-theme .new-address-next-step-button:hover {
background-color: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #ffffff !important;
}
/* Existing button icons must be white. Do NOT create new icons. */
html.ts-centralized-storefront-theme .button-1::before,
html.ts-centralized-storefront-theme .button-2::before,
html.ts-centralized-storefront-theme .button-1 i,
html.ts-centralized-storefront-theme .button-2 i,
html.ts-centralized-storefront-theme .button-1 svg,
html.ts-centralized-storefront-theme .button-2 svg,
html.ts-centralized-storefront-theme .shopping-cart-page .common-buttons .button-2::before {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
}
/* ============================================================================
4. HEADER ICONS / CART QTY / HOVER - PRESERVE ORIGINAL GEOMETRY
============================================================================ */
html.ts-centralized-storefront-theme .header-links .ico-account,
html.ts-centralized-storefront-theme .header-links .ico-compare,
html.ts-centralized-storefront-theme .header-links .ico-wishlist,
html.ts-centralized-storefront-theme .header-links .ico-cart,
html.ts-centralized-storefront-theme .header-links .ico-account::before,
html.ts-centralized-storefront-theme .header-links .ico-compare::before,
html.ts-centralized-storefront-theme .header-links .ico-wishlist::before,
html.ts-centralized-storefront-theme .header-links .ico-cart::before,
html.ts-centralized-storefront-theme .header-links-wrapper .ico-account::before,
html.ts-centralized-storefront-theme .header-links-wrapper .ico-compare::before,
html.ts-centralized-storefront-theme .header-links-wrapper .ico-wishlist::before,
html.ts-centralized-storefront-theme .header-links-wrapper .ico-cart::before {
color: #111111 !important;
fill: #111111 !important;
opacity: 1 !important;
}
html.ts-centralized-storefront-theme .header-links a,
html.ts-centralized-storefront-theme .header-links span,
html.ts-centralized-storefront-theme .header-links-wrapper a,
html.ts-centralized-storefront-theme .header-links-wrapper span {
color: #111111 !important;
}
html.ts-centralized-storefront-theme .header-links a:hover,
html.ts-centralized-storefront-theme .header-links a:hover span,
html.ts-centralized-storefront-theme .header-links-wrapper a:hover,
html.ts-centralized-storefront-theme .header-links-wrapper a:hover span,
html.ts-centralized-storefront-theme .header-links .ico-account:hover,
html.ts-centralized-storefront-theme .header-links .ico-compare:hover,
html.ts-centralized-storefront-theme .header-links .ico-wishlist:hover,
html.ts-centralized-storefront-theme .header-links .ico-cart:hover,
html.ts-centralized-storefront-theme .header-links .ico-account:hover::before,
html.ts-centralized-storefront-theme .header-links .ico-compare:hover::before,
html.ts-centralized-storefront-theme .header-links .ico-wishlist:hover::before,
html.ts-centralized-storefront-theme .header-links .ico-cart:hover::before {
color: var(--ts-ui-primary) !important;
fill: var(--ts-ui-primary) !important;
}
/* Cart/Wishlist counters: V6.3 intentionally leaves the Emporium theme's original
quantity geometry untouched. No pseudo-brackets are injected here. */
/* ============================================================================
5. FLYOUT CART - KEEP ORIGINAL SINGLE ICON, ONLY THEME ITS EXISTING COUNT BAR
============================================================================ */
html.ts-centralized-storefront-theme .mini-shopping-cart .count,
html.ts-centralized-storefront-theme .flyout-cart .count {
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
border-color: var(--ts-ui-primary) !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .mini-shopping-cart .count a,
html.ts-centralized-storefront-theme .flyout-cart .count a,
html.ts-centralized-storefront-theme .mini-shopping-cart .count span,
html.ts-centralized-storefront-theme .flyout-cart .count span {
color: #ffffff !important;
background: transparent !important;
}
/* Recolor any ORIGINAL cart cue; do not add a second pseudo icon. */
html.ts-centralized-storefront-theme .mini-shopping-cart .count::before,
html.ts-centralized-storefront-theme .flyout-cart .count::before {
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
}
html.ts-centralized-storefront-theme .mini-shopping-cart .buttons .button-1,
html.ts-centralized-storefront-theme .mini-shopping-cart .buttons .button-2,
html.ts-centralized-storefront-theme .flyout-cart .buttons .button-1,
html.ts-centralized-storefront-theme .flyout-cart .buttons .button-2 {
background: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
}
/* ============================================================================
6. SHOPPING CART / CHECKOUT TABLES
============================================================================ */
html.ts-centralized-storefront-theme .shopping-cart-page .page-title h1 {
color: #111111 !important;
}
/* Header rows: full primary box + consistent white typography. */
html.ts-centralized-storefront-theme .shopping-cart-page .cart thead,
html.ts-centralized-storefront-theme .shopping-cart-page .cart thead tr,
html.ts-centralized-storefront-theme .shopping-cart-page .cart thead th,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .cart thead,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .cart thead tr,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .cart thead th,
html.ts-centralized-storefront-theme .order-details-page .data-table thead,
html.ts-centralized-storefront-theme .order-details-page .data-table thead tr,
html.ts-centralized-storefront-theme .order-details-page .data-table thead th {
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
border-color: var(--ts-ui-primary) !important;
}
html.ts-centralized-storefront-theme .shopping-cart-page .cart thead th,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .cart thead th,
html.ts-centralized-storefront-theme .order-details-page .data-table thead th {
font-size: 15px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
vertical-align: middle !important;
}
/* Body/product text stays black. */
html.ts-centralized-storefront-theme .shopping-cart-page .cart td,
html.ts-centralized-storefront-theme .shopping-cart-page .cart td *,
html.ts-centralized-storefront-theme .shopping-cart-page .cart .product-name,
html.ts-centralized-storefront-theme .shopping-cart-page .cart .product-name:hover,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .cart td,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .cart td *,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .product-name,
html.ts-centralized-storefront-theme .order-details-page .data-table td,
html.ts-centralized-storefront-theme .order-details-page .data-table td * {
color: #111111 !important;
}
/* Totals: clean white background + black text. */
html.ts-centralized-storefront-theme .cart-total,
html.ts-centralized-storefront-theme .cart-total tr,
html.ts-centralized-storefront-theme .cart-total td,
html.ts-centralized-storefront-theme .cart-total label,
html.ts-centralized-storefront-theme .cart-total span,
html.ts-centralized-storefront-theme .cart-total .selected-shipping-method,
html.ts-centralized-storefront-theme .cart-total .value-summary,
html.ts-centralized-storefront-theme .total-info,
html.ts-centralized-storefront-theme .total-info tr,
html.ts-centralized-storefront-theme .total-info td,
html.ts-centralized-storefront-theme .total-info label,
html.ts-centralized-storefront-theme .total-info span {
background: #ffffff !important;
color: #111111 !important;
}
html.ts-centralized-storefront-theme .cart-total .order-total td,
html.ts-centralized-storefront-theme .cart-total .order-total strong,
html.ts-centralized-storefront-theme .cart-total .order-total .value-summary {
color: #111111 !important;
font-weight: 800 !important;
}
/* Totals panel: preserve the normal layout, but remove the filled grey card.
Keep a simple white panel with a light outline only. */
html.ts-centralized-storefront-theme .cart-footer,
html.ts-centralized-storefront-theme .order-summary-content .cart-footer,
html.ts-centralized-storefront-theme .shopping-cart-page .cart-footer,
html.ts-centralized-storefront-theme .checkout-page .cart-footer {
background: transparent !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .cart-footer .totals,
html.ts-centralized-storefront-theme .order-summary-content .cart-footer .totals,
html.ts-centralized-storefront-theme .shopping-cart-page .cart-footer .totals,
html.ts-centralized-storefront-theme .checkout-page .cart-footer .totals,
html.ts-centralized-storefront-theme .order-summary-content .totals {
background: #ffffff !important;
border: 1px solid var(--ts-ui-border) !important;
box-shadow: none !important;
}
/* ============================================================================
7. PAYMENT INFO PAGE - REMOVE UNNECESSARY OUTLINES/CARDS
============================================================================ */
html.ts-centralized-storefront-theme .payment-info-page .checkout-data,
html.ts-centralized-storefront-theme .payment-info-page .section,
html.ts-centralized-storefront-theme .payment-info-page .payment-info,
html.ts-centralized-storefront-theme .payment-info-page .payment-method,
html.ts-centralized-storefront-theme .payment-info-page .payment-info .info,
html.ts-centralized-storefront-theme .payment-info-page .order-summary,
html.ts-centralized-storefront-theme .payment-info-page .order-summary-content,
html.ts-centralized-storefront-theme .payment-info-page .table-wrapper,
html.ts-centralized-storefront-theme .checkout-page .section.payment-info,
html.ts-centralized-storefront-theme .checkout-page .section.payment-method {
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html.ts-centralized-storefront-theme .payment-info-page .page-title h1,
html.ts-centralized-storefront-theme .payment-info-page .title,
html.ts-centralized-storefront-theme .payment-info-page .title strong {
background: transparent !important;
color: #111111 !important;
border: 0 !important;
box-shadow: none !important;
}
/* ============================================================================
8. CONFIRM ORDER PAGE
============================================================================ */
html.ts-centralized-storefront-theme .order-confirm-page .checkout-data,
html.ts-centralized-storefront-theme .order-confirm-page .section,
html.ts-centralized-storefront-theme .order-confirm-page .confirm-order,
html.ts-centralized-storefront-theme .order-confirm-page .confirm-order form,
html.ts-centralized-storefront-theme .order-confirm-page .confirm-order .buttons,
html.ts-centralized-storefront-theme .order-confirm-page .order-summary,
html.ts-centralized-storefront-theme .order-confirm-page .order-summary-content,
html.ts-centralized-storefront-theme .order-confirm-page .order-review-data,
html.ts-centralized-storefront-theme .order-confirm-page .billing-info-wrap,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-info-wrap,
html.ts-centralized-storefront-theme .order-confirm-page .billing-info,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-info,
html.ts-centralized-storefront-theme .order-confirm-page .payment-method-info,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-method-info {
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* ONLY Billing and Shipping Address main headers are red. */
html.ts-centralized-storefront-theme .order-confirm-page .billing-info > .title,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-info > .title {
min-height: 66px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin: 0 0 18px !important;
padding: 10px 18px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
text-align: center !important;
}
html.ts-centralized-storefront-theme .order-confirm-page .billing-info > .title strong,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-info > .title strong {
margin: 0 !important;
color: #ffffff !important;
line-height: 1.25 !important;
}
/* Payment and Shipping subheadings remain plain black text. */
html.ts-centralized-storefront-theme .order-confirm-page .payment-method-info > .title,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-method-info > .title,
html.ts-centralized-storefront-theme .order-confirm-page .payment-method-info > .title strong,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-method-info > .title strong {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #111111 !important;
padding: 0 !important;
margin: 20px 0 10px !important;
text-align: center !important;
}
html.ts-centralized-storefront-theme .order-confirm-page .info-list,
html.ts-centralized-storefront-theme .order-confirm-page .info-list li,
html.ts-centralized-storefront-theme .order-confirm-page .info-list span {
color: #111111 !important;
}
/* Confirm action should not sit inside a bordered strip. */
html.ts-centralized-storefront-theme .order-confirm-page .confirm-order,
html.ts-centralized-storefront-theme .order-confirm-page .confirm-order form,
html.ts-centralized-storefront-theme .order-confirm-page .confirm-order .buttons {
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background: transparent !important;
}
html.ts-centralized-storefront-theme .order-confirm-page .confirm-order .buttons {
text-align: center !important;
padding: 0 !important;
margin: 10px 0 20px !important;
}
/* Store closed / minimum order warnings: more visible, no blue box. */
html.ts-centralized-storefront-theme .ts-store-closed-checkout-allowed,
html.ts-centralized-storefront-theme .order-confirm-page .min-order-warning,
html.ts-centralized-storefront-theme .shopping-cart-page .min-amount-warning {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 14px 0 20px !important;
padding: 10px 14px !important;
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
color: var(--ts-ui-primary) !important;
text-align: center !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 800 !important;
}
html.ts-centralized-storefront-theme .ts-store-closed-checkout-allowed::before,
html.ts-centralized-storefront-theme .ts-store-closed-checkout-allowed::after,
html.ts-centralized-storefront-theme .order-confirm-page .min-order-warning::before,
html.ts-centralized-storefront-theme .order-confirm-page .min-order-warning::after,
html.ts-centralized-storefront-theme .shopping-cart-page .min-amount-warning::before,
html.ts-centralized-storefront-theme .shopping-cart-page .min-amount-warning::after {
content: "✱" !important;
display: inline-block !important;
margin: 0 7px !important;
color: var(--ts-ui-primary) !important;
}
/* ============================================================================
9. ORDER COMPLETED / ORDER DETAILS
============================================================================ */
html.ts-centralized-storefront-theme .order-completed-page .checkout-data,
html.ts-centralized-storefront-theme .order-completed-page .section.order-completed,
html.ts-centralized-storefront-theme .order-completed-page .details,
html.ts-centralized-storefront-theme .order-completed-page .details > div,
html.ts-centralized-storefront-theme .order-completed-page .buttons {
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html.ts-centralized-storefront-theme .order-completed-page .details {
max-width: 680px !important;
margin: 20px auto 0 !important;
padding: 0 !important;
text-align: center !important;
}
html.ts-centralized-storefront-theme .order-completed-page .details-link {
display: flex !important;
justify-content: center !important;
margin: 16px 0 0 !important;
}
html.ts-centralized-storefront-theme .order-completed-page .details-link a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 220px !important;
max-width: 320px !important;
min-height: 42px !important;
padding: 10px 18px !important;
background: var(--ts-ui-primary) !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 7px !important;
color: #ffffff !important;
text-align: center !important;
white-space: normal !important;
text-decoration: none !important;
}
html.ts-centralized-storefront-theme .order-completed-page .details-link a:hover {
background: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #ffffff !important;
}
html.ts-centralized-storefront-theme .order-details-page .print-order-button,
html.ts-centralized-storefront-theme .order-details-page .pdf-invoice-button {
width: 155px !important;
min-width: 155px !important;
min-height: 46px !important;
box-sizing: border-box !important;
margin: 0 4px !important;
background: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
}
/* ============================================================================
10. MY ACCOUNT POPUP - COMPACT, NOT GIANT
============================================================================ */
html.ts-centralized-storefront-theme .header-element-dropdown,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown {
background: #ffffff !important;
box-shadow: 0 14px 28px rgba(16,24,40,.12) !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .button-1,
html.ts-centralized-storefront-theme .header-element-dropdown .button-2,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button {
width: auto !important;
min-width: 120px !important;
min-height: 36px !important;
padding: 7px 14px !important;
line-height: 1.2 !important;
border-radius: 6px !important;
text-align: center !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password,
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a {
color: var(--ts-ui-primary) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a:hover {
color: var(--ts-ui-hover) !important;
}
/* ============================================================================
11. LOGIN / REGISTER FULL PAGE - KEEP CLEAN, COMPACT ACTIONS
============================================================================ */
html.ts-centralized-storefront-theme .login-page .new-wrapper,
html.ts-centralized-storefront-theme .login-page .returning-wrapper {
background: #ffffff !important;
border-color: var(--ts-ui-border) !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .login-page .new-wrapper > .title,
html.ts-centralized-storefront-theme .login-page .returning-wrapper > .title {
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
}
html.ts-centralized-storefront-theme .login-page .new-wrapper > .title strong,
html.ts-centralized-storefront-theme .login-page .returning-wrapper > .title strong {
color: #ffffff !important;
}
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register,
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper i,
html.ts-centralized-storefront-theme .login-page .new-wrapper svg {
color: #111111 !important;
fill: #111111 !important;
stroke: #111111 !important;
}
html.ts-centralized-storefront-theme .login-page .buttons .button-1,
html.ts-centralized-storefront-theme .login-page .buttons .button-2 {
width: auto !important;
min-width: 130px !important;
min-height: 38px !important;
padding: 7px 16px !important;
}
html.ts-centralized-storefront-theme .ts-google-login {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
min-height: 40px !important;
padding: 8px 14px 8px 42px !important;
border: 1px solid #dadce0 !important;
border-radius: 6px !important;
background: #ffffff !important;
color: #111111 !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .ts-google-login::before {
content: "" !important;
position: absolute !important;
left: 13px !important;
top: 50% !important;
width: 18px !important;
height: 18px !important;
transform: translateY(-50%) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M21.6 12.227c0-.709-.064-1.391-.182-2.045H12v3.868h5.382a4.6 4.6 0 0 1-1.995 3.018v2.509h3.232c1.891-1.741 2.981-4.305 2.981-7.35Z'/%3E%3Cpath fill='%2334A853' d='M12 22c2.7 0 4.964-.895 6.619-2.423l-3.232-2.509c-.895.6-2.041.955-3.387.955-2.605 0-4.809-1.759-5.596-4.123H3.064v2.591A9.997 9.997 0 0 0 12 22Z'/%3E%3Cpath fill='%23FBBC05' d='M6.404 13.9A6.01 6.01 0 0 1 6.091 12c0-.659.114-1.3.313-1.9V7.509H3.064A9.997 9.997 0 0 0 2 12c0 1.614.386 3.141 1.064 4.491L6.404 13.9Z'/%3E%3Cpath fill='%23EA4335' d='M12 5.977c1.468 0 2.786.505 3.823 1.495l2.868-2.868C16.959 2.991 14.695 2 12 2a9.997 9.997 0 0 0-8.936 5.509l3.34 2.591C7.191 7.736 9.395 5.977 12 5.977Z'/%3E%3C/svg%3E") !important;
background-size: 18px 18px !important;
background-repeat: no-repeat !important;
}
/* ============================================================================
12. ALL CATEGORIES DROPDOWN - VISIBLE TEXT, WHITE BASE, THEME HOVER
Do not force dropdown open/closed state; only correct colors/z-index.
============================================================================ */
@media (min-width: 1001px) {
html.ts-centralized-storefront-theme .category-navigation-list-wrapper,
html.ts-centralized-storefront-theme .category-navigation-list,
html.ts-centralized-storefront-theme .category-navigation-list ul,
html.ts-centralized-storefront-theme .sublist,
html.ts-centralized-storefront-theme .sublist-wrap {
background: #ffffff !important;
z-index: 1000020 !important;
}
html.ts-centralized-storefront-theme .category-navigation-list li a,
html.ts-centralized-storefront-theme .category-navigation-list li span,
html.ts-centralized-storefront-theme .sublist li a,
html.ts-centralized-storefront-theme .sublist li span {
background: #ffffff !important;
color: #111111 !important;
opacity: 1 !important;
visibility: visible !important;
}
html.ts-centralized-storefront-theme .category-navigation-list li a:hover,
html.ts-centralized-storefront-theme .category-navigation-list li:hover > a,
html.ts-centralized-storefront-theme .sublist li a:hover,
html.ts-centralized-storefront-theme .sublist li:hover > a {
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
}
}
/* ============================================================================
13. SMART PRODUCT COLLECTION - WHITE MODULE + SUBTLE COMPLETE OUTER BOX
============================================================================ */
html.ts-centralized-storefront-theme .spc {
background: #ffffff !important;
border: 1px solid #ececec !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .spc-body,
html.ts-centralized-storefront-theme .spc-products,
html.ts-centralized-storefront-theme .spc .category-info,
html.ts-centralized-storefront-theme .spc .category-products,
html.ts-centralized-storefront-theme .spc .slick-list,
html.ts-centralized-storefront-theme .spc .slick-track,
html.ts-centralized-storefront-theme .spc .item-box,
html.ts-centralized-storefront-theme .spc .item-box .product-item,
html.ts-centralized-storefront-theme .spc .item-box .picture,
html.ts-centralized-storefront-theme .spc .item-box .details {
background: #ffffff !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .spc .item-box .product-item {
border-color: transparent !important;
}
/* ============================================================================
14. CLIENT MESSAGE / PHONE PILOT - DESKTOP ONLY
============================================================================ */
@media (min-width: 1200px) {
html.ts-centralized-storefront-theme .ts-info-inner {
grid-template-columns: minmax(270px, auto) auto minmax(260px, auto) minmax(340px, 1fr) !important;
column-gap: 14px !important;
align-items: center !important;
}
html.ts-centralized-storefront-theme .ts-info-inner::after {
content: var(--ts-pilot-client-message) " | " var(--ts-pilot-client-phone);
justify-self: end;
max-width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #111111;
font-size: 13px;
line-height: 1.2;
font-weight: 700;
}
}
@media (max-width: 1199px) {
html.ts-centralized-storefront-theme .ts-info-inner::after {
content: none !important;
display: none !important;
}
}
/* ============================================================================
15. MOBILE SAFETY
============================================================================ */
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme .shopping-cart-page .cart thead th,
html.ts-centralized-storefront-theme .checkout-page .order-summary-content .cart thead th,
html.ts-centralized-storefront-theme .order-details-page .data-table thead th {
font-size: 13px !important;
}
html.ts-centralized-storefront-theme .order-confirm-page .billing-info > .title,
html.ts-centralized-storefront-theme .order-confirm-page .shipping-info > .title {
min-height: 56px !important;
padding: 8px 12px !important;
}
html.ts-centralized-storefront-theme .ts-store-closed-checkout-allowed,
html.ts-centralized-storefront-theme .order-confirm-page .min-order-warning,
html.ts-centralized-storefront-theme .shopping-cart-page .min-amount-warning {
font-size: 14px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .button-1,
html.ts-centralized-storefront-theme .header-element-dropdown .button-2,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button {
min-width: 110px !important;
min-height: 34px !important;
padding: 6px 12px !important;
}
html.ts-centralized-storefront-theme .spc {
border-radius: 6px !important;
}
}
/* Approved storefront UI base checkpoint */
/* ============================================================================
V6.3 TARGETED CORRECTIONS - FULL REPLACEMENT FILE
============================================================================ */
/* 1) HEADER CART/WISHLIST COUNTS
Preserve the original Emporium layout exactly. The cart count and Wishlist count
are not repositioned or wrapped by this pilot CSS. */
/* 2) FLYOUT CART COUNT: remove the heavy red block; keep original icon and use theme text. */
html.ts-centralized-storefront-theme .mini-shopping-cart .count,
html.ts-centralized-storefront-theme .flyout-cart .count {
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--ts-ui-primary) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html.ts-centralized-storefront-theme .mini-shopping-cart .count a,
html.ts-centralized-storefront-theme .flyout-cart .count a,
html.ts-centralized-storefront-theme .mini-shopping-cart .count span,
html.ts-centralized-storefront-theme .flyout-cart .count span {
background: transparent !important;
color: var(--ts-ui-primary) !important;
font-weight: 700 !important;
}
/* Keep the theme's original cart cue; do not inject or duplicate an icon. */
html.ts-centralized-storefront-theme .mini-shopping-cart .count::before,
html.ts-centralized-storefront-theme .flyout-cart .count::before {
background-color: transparent !important;
filter: none !important;
-webkit-filter: none !important;
}
/* 3) CLIENT MESSAGE / PHONE: force a normal text font so icon-font inheritance cannot garble it. */
@media (min-width: 1200px) {
html.ts-centralized-storefront-theme .ts-info-inner::after {
font-family: Arial, Helvetica, sans-serif !important;
font-style: normal !important;
font-variant: normal !important;
text-transform: none !important;
letter-spacing: .15px !important;
color: #111111 !important;
speak: normal !important;
}
}
/* 4) LEFT CATEGORY SIDEBAR: white base; hover/active changes TEXT only, not whole row red. */
html.ts-centralized-storefront-theme .side-2 .block .listbox li,
html.ts-centralized-storefront-theme .side-2 .block .listbox li > a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li > a,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li > a,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li > span {
background: #ffffff !important;
color: #111111 !important;
}
html.ts-centralized-storefront-theme .side-2 .block .listbox li > a:hover,
html.ts-centralized-storefront-theme .side-2 .block .listbox li:hover > a,
html.ts-centralized-storefront-theme .side-2 .block .listbox li.active > a,
html.ts-centralized-storefront-theme .side-2 .block .listbox li.selected > a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li > a:hover,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li:hover > a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li.active > a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li.selected > a,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li > a:hover,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li:hover > a,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li.active > a,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li.selected > a {
background: #ffffff !important;
color: var(--ts-ui-primary) !important;
}
html.ts-centralized-storefront-theme .side-2 .block .listbox li:hover > a span,
html.ts-centralized-storefront-theme .side-2 .block .listbox li.active > a span,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li:hover > a span,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li.active > a span {
background: transparent !important;
color: var(--ts-ui-primary) !important;
}
/* 5) ORDER TOTALS: white surface + light outline only; never grey-filled. */
html.ts-centralized-storefront-theme .cart-footer .totals,
html.ts-centralized-storefront-theme .cart-footer .total-info,
html.ts-centralized-storefront-theme .cart-total,
html.ts-centralized-storefront-theme .checkout-page .total-info,
html.ts-centralized-storefront-theme .checkout-page .total-info .cart-total,
html.ts-centralized-storefront-theme .order-summary-content .total-info,
html.ts-centralized-storefront-theme .order-summary-content .cart-total {
background: #ffffff !important;
background-color: #ffffff !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .cart-footer .totals,
html.ts-centralized-storefront-theme .checkout-page .total-info,
html.ts-centralized-storefront-theme .order-summary-content .total-info {
border: 1px solid var(--ts-ui-border) !important;
}
html.ts-centralized-storefront-theme .cart-total td,
html.ts-centralized-storefront-theme .cart-total label,
html.ts-centralized-storefront-theme .cart-total span,
html.ts-centralized-storefront-theme .total-info td,
html.ts-centralized-storefront-theme .total-info label,
html.ts-centralized-storefront-theme .total-info span {
background: #ffffff !important;
color: #111111 !important;
}
/* Mobile: keep the same corrections without changing header geometry. */
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme #topcartlink .cart-qty {
min-width: 26px !important;
margin-left: 2px !important;
white-space: nowrap !important;
}
html.ts-centralized-storefront-theme .side-2 .block .listbox li > a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li > a,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li > a {
background: #ffffff !important;
color: #111111 !important;
}
html.ts-centralized-storefront-theme .side-2 .block .listbox li > a:hover,
html.ts-centralized-storefront-theme .side-2 .block .listbox li.active > a,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li > a:hover,
html.ts-centralized-storefront-theme .block-category-navigation .listbox li.active > a {
background: #ffffff !important;
color: var(--ts-ui-primary) !important;
}
}
/* Approved storefront UI refinement checkpoint */
/* ============================================================================
V6.3 FINAL TARGETED CORRECTIONS
- Sidebar/filter headers use theme red + white text
- Header cart/wishlist geometry stays original
- My Account dropdown uses one clean compact action scale
============================================================================ */
/* A) CATEGORY / FILTER SIDEBAR HEADERS - THEME RED + WHITE */
html.ts-centralized-storefront-theme .side-2 .block > .title,
html.ts-centralized-storefront-theme .side-2 .block .title,
html.ts-centralized-storefront-theme .side-2 .product-filter .filter-title,
html.ts-centralized-storefront-theme .side-2 .product-filters .filter-title,
html.ts-centralized-storefront-theme .side-2 .filter-title,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title {
background: var(--ts-ui-primary) !important;
background-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .side-2 .block > .title *,
html.ts-centralized-storefront-theme .side-2 .block .title *,
html.ts-centralized-storefront-theme .side-2 .product-filter .filter-title *,
html.ts-centralized-storefront-theme .side-2 .product-filters .filter-title *,
html.ts-centralized-storefront-theme .side-2 .filter-title *,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title *,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title * {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
html.ts-centralized-storefront-theme .side-2 .block > .title,
html.ts-centralized-storefront-theme .side-2 .block .title,
html.ts-centralized-storefront-theme .side-2 .product-filter .filter-title,
html.ts-centralized-storefront-theme .side-2 .filter-title {
min-height: 54px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Preserve the approved white list body and text-only hover. */
html.ts-centralized-storefront-theme .side-2 .listbox,
html.ts-centralized-storefront-theme .side-2 .block .listbox,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox {
background: #ffffff !important;
}
/* B) HEADER CART/WISHLIST - REVERT TO THEME ORIGINAL */
/* No width, position, display, margin, transform, pseudo-brackets or amount-layout
overrides are applied to .cart-qty / .wishlist-qty in V6.3. */
html.ts-centralized-storefront-theme #topcartlink .cart-qty::before,
html.ts-centralized-storefront-theme #topcartlink .cart-qty::after {
content: none !important;
display: none !important;
}
/* C) MY ACCOUNT DROPDOWN - COMPACT, SAME SCALE, CLEAN */
html.ts-centralized-storefront-theme .header-element-dropdown,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown,
html.ts-centralized-storefront-theme .account-desktop .header-element-dropdown {
background: #ffffff !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow: 0 12px 28px rgba(16,24,40,.16) !important;
padding: 18px !important;
box-sizing: border-box !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown input[type="text"],
html.ts-centralized-storefront-theme .header-element-dropdown input[type="email"],
html.ts-centralized-storefront-theme .header-element-dropdown input[type="password"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown input[type="text"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown input[type="email"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown input[type="password"] {
width: 100% !important;
min-height: 42px !important;
box-sizing: border-box !important;
border: 1px solid var(--ts-ui-border) !important;
border-radius: 7px !important;
background: #ffffff !important;
color: #111111 !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .remember-me,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .remember-me {
color: #333333 !important;
margin: 10px 0 !important;
}
/* Make Login / Register / Forgot Password use one compact width and height. */
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown .button-1,
html.ts-centralized-storefront-theme .header-element-dropdown .button-2,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"],
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="passwordrecovery"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 38px !important;
height: 38px !important;
margin: 8px 0 0 !important;
padding: 0 14px !important;
box-sizing: border-box !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 7px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .button-1:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .button-2:hover,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]:hover,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"]:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a:hover {
background: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #ffffff !important;
}
/* Prevent button wrapper geometry from creating the previous offset Register button. */
html.ts-centralized-storefront-theme .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-element-dropdown .button-wrap,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .button-wrap {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme .side-2 .block > .title,
html.ts-centralized-storefront-theme .side-2 .block .title,
html.ts-centralized-storefront-theme .side-2 .product-filter .filter-title,
html.ts-centralized-storefront-theme .side-2 .filter-title {
min-height: 48px !important;
padding: 0 14px !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown {
padding: 14px !important;
}
}
/* Approved storefront UI refinement checkpoint */
/* ============================================================================
V6.4 TARGETED CORRECTIONS
- Login/Register same size; button icons white
- Wishlist/Cart count badges use theme red + white text without moving layout
- Ajax filter title text/arrows/Clear All white; headings bold
============================================================================ */
/* 1) MY ACCOUNT POPUP: LOGIN + REGISTER = EXACT SAME BUTTON BOX */
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 8px 0 0 !important;
padding: 0 14px !important;
box-sizing: border-box !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 7px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Login/Register icons must be white, including icon-font / SVG / pseudo-icon variants. */
html.ts-centralized-storefront-theme .header-element-dropdown .login-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button::after,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button::after,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]::before,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]::after,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button i,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button i,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] i,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button svg,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button svg,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] svg,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"]::before {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
border-color: #ffffff !important;
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button:hover,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]:hover {
background: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #ffffff !important;
}
/* 2) WISHLIST / CART COUNTS: ONLY RECOLOR EXISTING BADGE; DO NOT MOVE IT */
html.ts-centralized-storefront-theme .header-links .wishlist-qty,
html.ts-centralized-storefront-theme .header-links .cart-qty,
html.ts-centralized-storefront-theme #topcartlink .cart-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .wishlist-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty {
background-color: var(--ts-ui-primary) !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
border-color: var(--ts-ui-primary) !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .header-links .wishlist-qty *,
html.ts-centralized-storefront-theme .header-links .cart-qty *,
html.ts-centralized-storefront-theme #topcartlink .cart-qty * {
color: #ffffff !important;
}
/* 3) AJAX FILTER HEADERS: RED BAR + BOLD WHITE TEXT + WHITE ARROW/CLEAR ALL */
html.ts-centralized-storefront-theme .side-2 .block > .title,
html.ts-centralized-storefront-theme .side-2 .block .title,
html.ts-centralized-storefront-theme .side-2 .product-filter .filter-title,
html.ts-centralized-storefront-theme .side-2 .product-filters .filter-title,
html.ts-centralized-storefront-theme .side-2 .filter-title,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title {
font-weight: 700 !important;
}
html.ts-centralized-storefront-theme .side-2 .block > .title .toggleControl,
html.ts-centralized-storefront-theme .side-2 .block .title .toggleControl,
html.ts-centralized-storefront-theme .side-2 .product-filter .filter-title .toggleControl,
html.ts-centralized-storefront-theme .side-2 .product-filters .filter-title .toggleControl,
html.ts-centralized-storefront-theme .side-2 .filter-title .toggleControl,
html.ts-centralized-storefront-theme .side-2 .block > .title .clearFilterOptionsAll,
html.ts-centralized-storefront-theme .side-2 .block .title .clearFilterOptionsAll,
html.ts-centralized-storefront-theme .side-2 .product-filter .filter-title .clearFilterOptionsAll,
html.ts-centralized-storefront-theme .side-2 .product-filters .filter-title .clearFilterOptionsAll,
html.ts-centralized-storefront-theme .side-2 .filter-title .clearFilterOptionsAll,
html.ts-centralized-storefront-theme .side-2 a.clearFilterOptionsAll {
color: #ffffff !important;
font-weight: 700 !important;
text-decoration: none !important;
opacity: 1 !important;
}
html.ts-centralized-storefront-theme .side-2 .block > .title .toggleControl::before,
html.ts-centralized-storefront-theme .side-2 .block > .title .toggleControl::after,
html.ts-centralized-storefront-theme .side-2 .block .title .toggleControl::before,
html.ts-centralized-storefront-theme .side-2 .block .title .toggleControl::after,
html.ts-centralized-storefront-theme .side-2 .filter-title .toggleControl::before,
html.ts-centralized-storefront-theme .side-2 .filter-title .toggleControl::after,
html.ts-centralized-storefront-theme .side-2 .filter-title::before,
html.ts-centralized-storefront-theme .side-2 .filter-title::after {
color: #ffffff !important;
border-color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* In some Nop Ajax Filters builds Clear All is outside filter-title but inside filters container. */
html.ts-centralized-storefront-theme .side-2 .clearFilterOptionsAll,
html.ts-centralized-storefront-theme .side-2 a.clearFilterOptionsAll {
color: #ffffff !important;
}
/* Keep category/body links clean; only hover/active uses theme color, not red fill. */
html.ts-centralized-storefront-theme .side-2 .listbox a,
html.ts-centralized-storefront-theme .side-2 .listbox li,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox a {
background: transparent !important;
}
html.ts-centralized-storefront-theme .side-2 .listbox a:hover,
html.ts-centralized-storefront-theme .side-2 .listbox li.active > a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox a:hover,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .listbox li.active > a {
background: transparent !important;
color: var(--ts-ui-primary) !important;
font-weight: 700 !important;
}
/* Mobile keeps the same visual treatment. */
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
}
/* Approved storefront UI refinement checkpoint */
/* ============================================================================
V6.5 FINAL TARGETED FIXES ONLY
- My Account popup buttons: compact equal Login/Register + styled Forgot Password
- Header cart qty uses bracket format like wishlist: (0)
- Sidebar Categories header matches Price range bold header styling
- Full login page Returning Customer header matches theme; register pen icon black
============================================================================ */
/* 1) MY ACCOUNT POPUP: equal compact buttons, rounded corners, forgot-password in same clean style */
html.ts-centralized-storefront-theme .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-element-dropdown .button-wrap,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .button-wrap,
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown .button-1,
html.ts-centralized-storefront-theme .header-element-dropdown .button-2,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"] {
width: 170px !important;
min-width: 170px !important;
max-width: 170px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 8px auto 0 !important;
padding: 0 16px !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password {
width: 100% !important;
margin: 8px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password a,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="passwordrecovery"] {
width: 170px !important;
min-width: 170px !important;
max-width: 170px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
margin: 8px auto 0 !important;
padding: 0 14px !important;
border: 1px solid #e2e2e2 !important;
border-radius: 8px !important;
background: #f5f5f5 !important;
color: #4f4f4f !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: 0 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
box-shadow: none !important;
white-space: nowrap !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a:hover,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password a:hover,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"]:hover,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="passwordrecovery"]:hover {
background: #eeeeee !important;
border-color: #d8d8d8 !important;
color: #333333 !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"]::before,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button i,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button i,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] i,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button svg,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button svg,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] svg {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
opacity: 1 !important;
}
/* 2) HEADER CART COUNT: match wishlist logic with brackets, without moving layout */
html.ts-centralized-storefront-theme #topcartlink .cart-qty,
html.ts-centralized-storefront-theme .header-links .cart-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty {
color: #ffffff !important;
white-space: nowrap !important;
}
html.ts-centralized-storefront-theme #topcartlink .cart-qty::before,
html.ts-centralized-storefront-theme .header-links .cart-qty::before,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::before {
content: "(" !important;
display: inline !important;
color: inherit !important;
}
html.ts-centralized-storefront-theme #topcartlink .cart-qty::after,
html.ts-centralized-storefront-theme .header-links .cart-qty::after,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::after {
content: ")" !important;
display: inline !important;
color: inherit !important;
}
/* 3) SIDEBAR FILTER / CATEGORY HEADERS: Categories should visually match Price range */
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title a,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title span,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title span,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title strong,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title strong {
color: #ffffff !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
/* 4) FULL LOGIN PAGE: Returning Customer same themed header; guest/register pen icon black */
html.ts-centralized-storefront-theme .login-page .returning-wrapper > .title,
html.ts-centralized-storefront-theme .login-page .returning-wrapper .title,
html.ts-centralized-storefront-theme .login-page .returning-wrapper > .title strong,
html.ts-centralized-storefront-theme .login-page .returning-wrapper .title strong {
background: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
opacity: 1 !important;
}
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register,
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register::after,
html.ts-centralized-storefront-theme .login-page .new-wrapper i,
html.ts-centralized-storefront-theme .login-page .new-wrapper i::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper svg,
html.ts-centralized-storefront-theme .login-page .new-wrapper svg *,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content i,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content svg,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content .icon,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content .ico-register {
color: #111111 !important;
fill: #111111 !important;
stroke: #111111 !important;
border-color: #111111 !important;
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
}
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"] {
width: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
}
}
/* Approved storefront UI refinement checkpoint */
/* ============================================================================
V6.6 TARGETED FIXES ONLY
1) Cart quantity badge exactly matches wishlist badge and shows brackets.
2) Account popup Login/Register same width; text/icons forced white.
3) Guest/Register pen icon forced black.
No other layout/theme areas are changed in this block.
============================================================================ */
/* 1) CART + WISHLIST COUNT BADGES: IDENTICAL VISUAL GEOMETRY */
html.ts-centralized-storefront-theme .header-links .ico-wishlist,
html.ts-centralized-storefront-theme .header-links .ico-cart,
html.ts-centralized-storefront-theme .header-links-wrapper .ico-wishlist,
html.ts-centralized-storefront-theme .header-links-wrapper .ico-cart,
html.ts-centralized-storefront-theme #topcartlink > a {
position: relative !important;
}
html.ts-centralized-storefront-theme .header-links .wishlist-qty,
html.ts-centralized-storefront-theme .header-links .cart-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .wishlist-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty,
html.ts-centralized-storefront-theme #topcartlink .cart-qty {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 22px !important;
height: 18px !important;
padding: 0 4px !important;
border-radius: 999px !important;
background: var(--ts-ui-primary) !important;
border: 0 !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 18px !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: nowrap !important;
box-shadow: none !important;
}
/* Cart source value is numeric; add only the missing brackets, like Wishlist. */
html.ts-centralized-storefront-theme #topcartlink .cart-qty::before,
html.ts-centralized-storefront-theme .header-links .cart-qty::before,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::before {
content: "(" !important;
display: inline !important;
color: #ffffff !important;
}
html.ts-centralized-storefront-theme #topcartlink .cart-qty::after,
html.ts-centralized-storefront-theme .header-links .cart-qty::after,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::after {
content: ")" !important;
display: inline !important;
color: #ffffff !important;
}
/* 2) MY ACCOUNT POPUP: LOGIN + REGISTER SAME WIDTH / SAME HEIGHT / WHITE CONTENT */
html.ts-centralized-storefront-theme .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-element-dropdown .button-wrap,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .button-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"] {
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
float: none !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 170px !important;
min-width: 170px !important;
max-width: 170px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 0 auto !important;
padding: 0 14px !important;
box-sizing: border-box !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 8px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: none !important;
overflow: hidden !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button *,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button *,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"] * {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button::after,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button::after,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]::before,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]::after,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button::after,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button::after,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"]::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"]::after {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
border-color: #ffffff !important;
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* 3) FULL LOGIN PAGE: GUEST/REGISTER PEN MUST BE BLACK */
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register,
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .ico-register::after,
html.ts-centralized-storefront-theme .login-page .new-wrapper .register-block::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .register-block::after,
html.ts-centralized-storefront-theme .login-page .new-wrapper .text::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .text::after,
html.ts-centralized-storefront-theme .login-page .new-wrapper .content::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .content::after,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content::after,
html.ts-centralized-storefront-theme .login-page .new-wrapper i,
html.ts-centralized-storefront-theme .login-page .new-wrapper i::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper svg,
html.ts-centralized-storefront-theme .login-page .new-wrapper svg * {
color: #111111 !important;
fill: #111111 !important;
stroke: #111111 !important;
border-color: #111111 !important;
opacity: 1 !important;
filter: grayscale(1) brightness(0) !important;
-webkit-filter: grayscale(1) brightness(0) !important;
}
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] {
width: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
}
/* Approved storefront UI refinement checkpoint */
/* ============================================================================
V6.7 FINAL TARGETED CORRECTIONS ONLY
- Cart badge: exact bracket presentation like Wishlist, with enough width.
- My Account popup: Login/Register equal; Forgot Password red; all button text/icons white.
- Guest/Register large pencil: force black without changing panel layout.
============================================================================ */
/* 1) HEADER COUNTS: Wishlist already contains brackets in nopCommerce resource.
Cart source is numeric, so brackets are added only to Cart. */
html.ts-centralized-storefront-theme .header-links .wishlist-qty,
html.ts-centralized-storefront-theme .header-links .cart-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .wishlist-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty,
html.ts-centralized-storefront-theme #topcartlink .cart-qty {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 30px !important;
width: auto !important;
max-width: none !important;
height: 20px !important;
min-height: 20px !important;
padding: 0 6px !important;
overflow: visible !important;
white-space: nowrap !important;
border-radius: 999px !important;
background: var(--ts-ui-primary) !important;
border: 0 !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 20px !important;
letter-spacing: 0 !important;
text-align: center !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme #topcartlink .cart-qty::before,
html.ts-centralized-storefront-theme .header-links .cart-qty::before,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::before {
content: "(" !important;
display: inline !important;
color: #ffffff !important;
line-height: inherit !important;
}
html.ts-centralized-storefront-theme #topcartlink .cart-qty::after,
html.ts-centralized-storefront-theme .header-links .cart-qty::after,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::after {
content: ")" !important;
display: inline !important;
color: #ffffff !important;
line-height: inherit !important;
}
/* 2) MY ACCOUNT POPUP - target both Emporium link classes and button classes. */
html.ts-centralized-storefront-theme .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .buttons,
html.ts-centralized-storefront-theme .header-element-dropdown .button-wrap,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .button-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-login,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-register,
html.ts-centralized-storefront-theme .header-element-dropdown a.ico-login,
html.ts-centralized-storefront-theme .header-element-dropdown a.ico-register,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .ico-login,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .ico-register,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"] {
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
float: none !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
width: 210px !important;
min-width: 210px !important;
max-width: 210px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 0 auto !important;
padding: 0 16px !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 9px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Forgot Password uses the same red family but slightly shorter. */
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 8px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .forgot-password a,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"],
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="passwordrecovery"] {
position: static !important;
float: none !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 210px !important;
min-width: 210px !important;
max-width: 210px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
margin: 0 auto !important;
padding: 0 14px !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 9px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button *,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button *,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-login *,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-register *,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"] *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .login-button *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .register-button *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .ico-login *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .ico-register *,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown a[href*="register"] * {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .ico-login::before,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-register::before,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-login::after,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-register::after,
html.ts-centralized-storefront-theme .header-element-dropdown .login-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button::before,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .ico-login::before,
html.ts-centralized-storefront-theme .header-links .header-element-dropdown .ico-register::before {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
border-color: #ffffff !important;
filter: brightness(0) invert(1) !important;
-webkit-filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
html.ts-centralized-storefront-theme .header-element-dropdown .login-button:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-login:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-register:hover,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"]:hover,
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a:hover,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"]:hover {
background: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #ffffff !important;
}
/* 3) FULL LOGIN PAGE: replace/cover the guest-register pencil with a black vector.
No width/position of the guest panel is changed. */
html.ts-centralized-storefront-theme .login-page .new-wrapper .content,
html.ts-centralized-storefront-theme .login-page .new-wrapper .text,
html.ts-centralized-storefront-theme .login-page .new-wrapper .register-block,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content {
position: relative !important;
}
html.ts-centralized-storefront-theme .login-page .new-wrapper::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .content::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .text::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .register-block::before,
html.ts-centralized-storefront-theme .login-page .new-wrapper .topic-html-content::before {
filter: grayscale(1) brightness(0) !important;
-webkit-filter: grayscale(1) brightness(0) !important;
color: #111111 !important;
fill: #111111 !important;
stroke: #111111 !important;
opacity: 1 !important;
}
/* Black vector overlay for Emporium's large guest/register pencil position. */
html.ts-centralized-storefront-theme .login-page .new-wrapper .content::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 72px !important;
height: 72px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23111111' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 52l4-16L42 10a7 7 0 0 1 10 10L26 46 12 52z'/%3E%3Cpath d='M37 15l12 12'/%3E%3Cpath d='M16 36l10 10'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
pointer-events: none !important;
z-index: 2 !important;
}
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme .header-element-dropdown .login-button,
html.ts-centralized-storefront-theme .header-element-dropdown .register-button,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-login,
html.ts-centralized-storefront-theme .header-element-dropdown .ico-register,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="register"],
html.ts-centralized-storefront-theme .header-element-dropdown .forgot-password a,
html.ts-centralized-storefront-theme .header-element-dropdown a[href*="passwordrecovery"] {
width: 190px !important;
min-width: 190px !important;
max-width: 190px !important;
}
}
/* Approved storefront UI refinement checkpoint */
/* ============================================================================
SAFE POPUP FIX - NO CSS4 PARENT SELECTORS
Based on exact popup form structure supplied by user.
IMPORTANT: designed for legacy nopCommerce/Emporium CSS processing.
============================================================================ */
/* Exact popup wrapper positions from supplied form:
1 title, 2 form-fields, 3 buttons, 4 in-header-register, 5 token, 6 remember hidden
=> buttons = 4th from end, register wrapper = 3rd from end, form-fields = 5th from end.
*/
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4),
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 8px 0 0 !important;
padding: 0 !important;
position: static !important;
float: none !important;
transform: none !important;
box-sizing: border-box !important;
}
/* Login + Register: exact same dimensions. */
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4) > input.login-button,
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button {
display: block !important;
width: 190px !important;
min-width: 190px !important;
max-width: 190px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 0 auto !important;
padding: 0 16px !important;
box-sizing: border-box !important;
position: static !important;
float: none !important;
transform: none !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 8px !important;
background-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 40px !important;
text-align: center !important;
text-transform: uppercase !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* Register icon white, using safe background SVG. */
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
background-position: 18px center !important;
padding-left: 38px !important;
padding-right: 20px !important;
}
/* Forgot Password: exact supplied form-fields position; red/white and centered. */
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password {
display: block !important;
width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
float: none !important;
position: static !important;
text-align: center !important;
background: transparent !important;
border: 0 !important;
}
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 190px !important;
min-width: 190px !important;
max-width: 190px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
margin: 0 auto !important;
padding: 0 14px !important;
box-sizing: border-box !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 8px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
}
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4) > input.login-button:hover,
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button:hover,
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password > a:hover {
background-color: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #ffffff !important;
}
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4) > input.login-button,
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button,
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password > a {
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
}
}
/* END V6.9 SAFE POPUP FIX */
/* ============================================================================
V6.10 FINAL TARGETED OVERRIDES
ONLY:
1) Wishlist/Cart count visual parity + cart brackets
2) Forgot Password / Login / Register exact same size and typography
No other storefront layout changes.
============================================================================ */
/* --- 1. HEADER COUNT BADGES: SAME SIZE / SAME TYPOGRAPHY --- */
html.ts-centralized-storefront-theme .header-links .wishlist-qty,
html.ts-centralized-storefront-theme .header-links .cart-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .wishlist-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty,
html.ts-centralized-storefront-theme #topcartlink .cart-qty {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 30px !important;
width: 30px !important;
max-width: 30px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 20px !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
text-align: center !important;
box-shadow: none !important;
}
/* Cart source is numeric; visually wrap it exactly like Wishlist. */
html.ts-centralized-storefront-theme #topcartlink .cart-qty::before,
html.ts-centralized-storefront-theme .header-links .cart-qty::before,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::before {
content: "(" !important;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font: inherit !important;
line-height: inherit !important;
}
html.ts-centralized-storefront-theme #topcartlink .cart-qty::after,
html.ts-centralized-storefront-theme .header-links .cart-qty::after,
html.ts-centralized-storefront-theme .header-links-wrapper .cart-qty::after {
content: ")" !important;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font: inherit !important;
line-height: inherit !important;
}
/* --- 2. EXACT ACCOUNT POPUP STRUCTURE PROVIDED BY USER --- */
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4),
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3),
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 8px 0 0 !important;
padding: 0 !important;
position: static !important;
float: none !important;
transform: none !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
}
/* All three actions must be identical dimensions and typography. */
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4) > input.login-button,
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button,
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 190px !important;
min-width: 190px !important;
max-width: 190px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 0 auto !important;
padding: 0 14px !important;
position: static !important;
float: none !important;
transform: none !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 8px !important;
background-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* Register pencil/icon remains white. */
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
background-position: 16px center !important;
padding-left: 38px !important;
padding-right: 18px !important;
}
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4) > input.login-button:hover,
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button:hover,
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password > a:hover {
background-color: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #ffffff !important;
}
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme form[action$="/login"] > .buttons:nth-last-child(4) > input.login-button,
html.ts-centralized-storefront-theme form[action$="/login"] > .in-header-register:nth-last-child(3) > input.register-button,
html.ts-centralized-storefront-theme form[action$="/login"] > .form-fields:nth-last-child(5) .inputs.reversed > .forgot-password > a {
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
}
/* END V6.10 FINAL TARGETED OVERRIDES */
/* ============================================================================
APPROVED WISHLIST HOVER COUNT VISIBILITY FIX
============================================================================ */
html.ts-centralized-storefront-theme .header-links a:hover .wishlist-qty,
html.ts-centralized-storefront-theme .header-links .ico-wishlist:hover .wishlist-qty,
html.ts-centralized-storefront-theme .header-links-wrapper a:hover .wishlist-qty,
html.ts-centralized-storefront-theme .header-links-wrapper .ico-wishlist:hover .wishlist-qty,
html.ts-centralized-storefront-theme .wishlist-link:hover .wishlist-qty {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
background: var(--ts-ui-primary) !important;
background-color: var(--ts-ui-primary) !important;
color: #ffffff !important;
border-color: var(--ts-ui-primary) !important;
}
html.ts-centralized-storefront-theme .header-links a:hover .wishlist-qty::before,
html.ts-centralized-storefront-theme .header-links a:hover .wishlist-qty::after,
html.ts-centralized-storefront-theme .header-links-wrapper a:hover .wishlist-qty::before,
html.ts-centralized-storefront-theme .header-links-wrapper a:hover .wishlist-qty::after,
html.ts-centralized-storefront-theme .wishlist-link:hover .wishlist-qty::before,
html.ts-centralized-storefront-theme .wishlist-link:hover .wishlist-qty::after {
color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* End approved wishlist hover count visibility fix */
/* ============================================================================
R8 26.9.28.1 - FINAL CENTRALIZATION CONTROLS
============================================================================ */
:root {
--ts-ui-primary: var(--ts-storefront-theme,#e80109);
--ts-ui-hover: var(--ts-storefront-hover,var(--ts-storefront-theme-strong,#b90006));
}
/* Real plugin markup owns client message/phone; never use old pseudo-content. */
html.ts-centralized-storefront-theme .ts-info-inner::after { content:none!important; display:none!important; }
html.ts-client-header-info-active ul.top-menu::before,
html.ts-client-header-info-active ul.top-menu::after { content:none!important; display:none!important; }
@media (min-width:1200px) {
html.ts-centralized-storefront-theme .ts-info-inner {
grid-template-columns:minmax(270px,auto) auto minmax(260px,auto) minmax(320px,1fr)!important;
}
html.ts-centralized-storefront-theme .ts-client-header-info {
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:14px!important;
min-width:0!important;
color:#111!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:13px!important;
font-weight:700!important;
line-height:1.2!important;
white-space:nowrap!important;
overflow:hidden!important;
}
html.ts-centralized-storefront-theme .ts-client-header-message {
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
html.ts-centralized-storefront-theme .ts-client-header-phone {
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
flex:0 0 auto!important;
color:#111!important;
}
html.ts-centralized-storefront-theme .ts-client-header-phone svg { width:15px!important;height:15px!important;fill:#111!important; }
}
@media (max-width:1199px) { html.ts-centralized-storefront-theme .ts-client-header-info { display:none!important; } }
/* 26.9.30.1 MOBILE HEADER FLOW FINAL
Approved live-console behavior:
- App banner + native compact mobile header stay in the existing sticky header area.
- Delivery / Deals / Open-Closed / Store Timing / Delivery Area are outside that sticky area
and scroll away with normal page content.
- A small runtime spacer reserves only the real compact sticky stack footprint; the JavaScript
has a hard safety cap so an accidental large white gap can never be created.
- The zero-height Emporium .header placeholder loses only its mobile top/bottom margin so the
hero slider follows the info block without a cosmetic white band.
Desktop sticky behavior is intentionally untouched. */
.ts-mobile-info-flow-spacer{display:none}
@media (max-width:768px) {
html.ts-centralized-storefront-theme .ts-mobile-app-download-banner {
position:relative!important;
top:0!important;
bottom:auto!important;
width:100%!important;
max-width:none!important;
margin:0!important;
transform:none!important;
box-sizing:border-box!important;
z-index:10030!important;
}
html.ts-centralized-storefront-theme .responsive-nav-wrapper {
margin-top:0!important;
}
body.ts-mobile-info-flow-active .ts-mobile-info-flow-spacer {
display:block!important;
width:100%!important;
min-width:0!important;
height:0;
margin:0!important;
padding:0!important;
border:0!important;
box-sizing:border-box!important;
pointer-events:none!important;
}
body.ts-mobile-info-flow-active .ts-ecom-headerbar[data-ts-info-bar="1"] {
position:relative!important;
top:auto!important;
bottom:auto!important;
left:auto!important;
right:auto!important;
inset:auto!important;
width:100%!important;
margin:0!important;
padding-top:0!important;
transform:none!important;
clear:both!important;
z-index:2!important;
box-shadow:none!important;
}
body.ts-mobile-info-flow-active .header.ts-mobile-zero-header-gap {
margin-top:0!important;
margin-bottom:0!important;
}
}
/* Admin-controlled plugin mobile back button. Disabled means even legacy markup stays hidden. */
html:not(.ts-mobile-back-enabled) .mobile-header-back-btn { display:none!important; }
.mobile-header-back-btn { display:none; }
@media screen and (max-width:768px) {
html.ts-mobile-back-enabled .responsive-nav-wrapper {
display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;
padding:0 8px!important;box-sizing:border-box!important;position:relative!important;
}
html.ts-mobile-back-enabled .responsive-nav-wrapper .left-box,
html.ts-mobile-back-enabled .responsive-nav-wrapper .menu-title,
html.ts-mobile-back-enabled .responsive-nav-wrapper .search-wrap {
display:flex!important;align-items:center!important;gap:6px!important;flex-shrink:0!important;
}
html.ts-mobile-back-enabled .mobile-header-back-btn {
display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;
background-color:var(--ts-ui-primary)!important;border-radius:6px!important;text-decoration:none!important;flex-shrink:0!important;
box-shadow:0 1px 3px rgba(0,0,0,.15)!important;
}
html.ts-mobile-back-enabled .mobile-header-back-btn:hover { background-color:var(--ts-ui-hover)!important; }
html.ts-mobile-back-enabled .mobile-header-back-btn svg { display:block!important;fill:none!important;stroke:#fff!important; }
html.ts-mobile-back-enabled .responsive-nav-wrapper .mobile-logo {
position:static!important;transform:none!important;flex:1 1 auto!important;text-align:center!important;margin:0 8px!important;
overflow:hidden!important;display:flex!important;justify-content:center!important;align-items:center!important;
}
html.ts-mobile-back-enabled .responsive-nav-wrapper .mobile-logo a.logo { display:inline-block!important;max-width:100%!important; }
html.ts-mobile-back-enabled .responsive-nav-wrapper .mobile-logo img { max-height:32px!important;width:auto!important;object-fit:contain!important;vertical-align:middle!important; }
html.ts-mobile-back-enabled .responsive-nav-wrapper .right-box,
html.ts-mobile-back-enabled .responsive-nav-wrapper .header-links-wrapper {
display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important;z-index:10!important;
}
}
.home-page .mobile-header-back-btn,.home-page-body .mobile-header-back-btn { display:none!important; }
/* ===== 26.9.28.1 APPROVED UI PROMOTION END ===== */
/* ==========================================================================
26.9.28.2 CENTRALIZED FOOTER THEME CONFIGURATION
Admin controls footer background and optional content-panel color.
Layout stays fixed; readable text colors are emitted by the plugin.
========================================================================== */
html.ts-centralized-storefront-theme .footer,
html.ts-centralized-storefront-theme .footer-middle,
html.ts-centralized-storefront-theme .footer-lower,
html.ts-centralized-storefront-theme .jks-custom-footer-middle {
background-color: var(--ts-footer-bg,var(--ts-storefront-theme,#e80109)) !important;
color: var(--ts-footer-text,#fff) !important;
}
html.ts-centralized-storefront-theme .footer-lower a,
html.ts-centralized-storefront-theme .footer-lower span,
html.ts-centralized-storefront-theme .footer-lower div,
html.ts-centralized-storefront-theme .footer-store-description,
html.ts-centralized-storefront-theme .footer-block:first-child p,
html.ts-centralized-storefront-theme .footer-block:first-child .title strong,
html.ts-centralized-storefront-theme .footer-middle > div:first-child .title strong {
color: var(--ts-footer-text,#fff) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-upper > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-middle > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-blocks .footer-block:not(:first-child) {
background-color: var(--ts-footer-panel-bg,#eaeaea) !important;
color: var(--ts-footer-panel-text,#111) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-block:not(:first-child) .title strong,
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-middle > div:not(:first-child) .title strong {
color: var(--ts-footer-panel-heading,var(--ts-storefront-theme,#e80109)) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-block:not(:first-child) ul a,
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-block:not(:first-child) .list a,
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-block:not(:first-child) .list li a {
color: var(--ts-footer-panel-text,#111) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-block:not(:first-child) ul a:hover,
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-block:not(:first-child) .list a:hover,
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-block:not(:first-child) .list li a:hover {
color: var(--ts-footer-panel-heading,var(--ts-storefront-hover,#b90006)) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-upper > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-middle > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-blocks .footer-block:not(:first-child) {
background-color: transparent !important;
color: var(--ts-footer-text,#fff) !important;
border-color: rgba(255,255,255,.18) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-block:not(:first-child) .title strong,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-middle > div:not(:first-child) .title strong,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-block:not(:first-child) ul a,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-block:not(:first-child) .list a,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-block:not(:first-child) .list li a {
color: var(--ts-footer-text,#fff) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-block:not(:first-child) ul a:hover,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-block:not(:first-child) .list a:hover,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-block:not(:first-child) .list li a:hover {
color: var(--ts-storefront-hover,var(--ts-footer-text,#fff)) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer .social-sharing a,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-middle .social a,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer .social-sharing a::before,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-middle .social a::before,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer .social-sharing a::after,
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-middle .social a::after {
color: var(--ts-footer-text,#fff) !important;
}
@media (max-width:1000px) {
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-upper > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-middle > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-enabled .footer-blocks .footer-block:not(:first-child) {
background-color: var(--ts-footer-panel-bg,#eaeaea) !important;
}
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-upper > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-middle > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-panel-disabled .footer-blocks .footer-block:not(:first-child) {
background-color: transparent !important;
border-bottom: 1px solid rgba(255,255,255,.15) !important;
border-radius: 0 !important;
}
}
/* ==========================================================================
26.10.5.1 STORE-SCOPED PRIMARY + FOUR FOOTER COLOR OVERRIDES
The SPC CTA consumes the same authoritative primary/hover variables as the
rest of the plugin. Optional footer colors are activated only when the
corresponding setting is configured, preserving the approved old palette
exactly when a new field is left blank.
========================================================================== */
html.ts-centralized-storefront-theme .spc-to-all-products,
html.ts-centralized-storefront-theme a.spc-to-all-products,
html.ts-centralized-storefront-theme .spc .spc-to-all-products {
background-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
border-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
color: #ffffff !important;
}
html.ts-centralized-storefront-theme .spc-to-all-products:hover,
html.ts-centralized-storefront-theme a.spc-to-all-products:hover,
html.ts-centralized-storefront-theme .spc .spc-to-all-products:hover {
background-color: var(--ts-ui-hover,var(--ts-storefront-hover,#b90006)) !important;
border-color: var(--ts-ui-hover,var(--ts-storefront-hover,#b90006)) !important;
color: #ffffff !important;
}
html.ts-centralized-storefront-theme.ts-footer-heading-custom .footer .title strong,
html.ts-centralized-storefront-theme.ts-footer-heading-custom .footer-middle .title strong {
color: var(--ts-footer-heading) !important;
}
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer-block:not(:first-child) .list a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer-block:not(:first-child) ul a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer .social-sharing a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer .social-sharing a::before,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer .social-sharing a::after,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer .social-icons a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer .social-icons a::before,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer .social-icons a::after,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer-middle .social a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer-middle .social a::before,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom .footer-middle .social a::after {
color: var(--ts-footer-link-social) !important;
}
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom .footer-store-description,
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom .footer-lower,
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom .footer-lower a,
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom .footer-lower span,
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom .footer-lower div {
color: var(--ts-footer-description-bottom) !important;
}
html.ts-centralized-storefront-theme.ts-footer-divider-custom .footer-middle .footer-block,
html.ts-centralized-storefront-theme.ts-footer-divider-custom .footer .footer-lower,
html.ts-centralized-storefront-theme.ts-footer-divider-custom.ts-footer-panel-disabled .footer-upper > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-divider-custom.ts-footer-panel-disabled .footer-middle > div:not(:first-child),
html.ts-centralized-storefront-theme.ts-footer-divider-custom.ts-footer-panel-disabled .footer-blocks .footer-block:not(:first-child) {
border-color: var(--ts-footer-divider) !important;
}
/* ============================================================================
26.10.1.1 THEME CENTRALIZATION GAP CLOSURE
Approved console-tested controls: SPC mobile dropdowns, category mobile
selectors, account flyout theme/alignment, cart flyout theme and footer link.
============================================================================ */
/* Powered by Technosys remains visually inherited while becoming clickable. */
html.ts-centralized-storefront-theme .footer-powered-by > a {
color: inherit !important;
text-decoration: none !important;
cursor: pointer !important;
}
html.ts-centralized-storefront-theme .footer-powered-by > a:hover,
html.ts-centralized-storefront-theme .footer-powered-by > a:focus {
color: inherit !important;
text-decoration: underline !important;
}
/* Account flyout: theme header + exact equal action controls + centered Remember me. */
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header > .close-side-menu {
background-color: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
color: #fff !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header > .close-side-menu *,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header > .close-side-menu .close-side-menu-btn,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header > .close-side-menu .close-side-menu-btn::before,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header > .close-side-menu .close-side-menu-btn::after {
color: #fff !important;
border-color: #fff !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .inputs.reversed {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-align: center !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .inputs.reversed .forgot-password {
flex: 0 0 100% !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
order: 1 !important;
margin: 0 0 8px 0 !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .forgot-password > a,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header input.login-button,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header input.register-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
padding: 0 14px !important;
margin: 0 !important;
box-sizing: border-box !important;
background: var(--ts-ui-primary) !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 6px !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 40px !important;
text-align: center !important;
text-transform: uppercase !important;
text-decoration: none !important;
cursor: pointer !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .buttons,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .in-header-register {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin: 8px 0 0 0 !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .inputs.reversed input[type="checkbox"] {
order: 2 !important;
flex: 0 0 auto !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
padding: 0 !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .inputs.reversed label[for="RememberMe"] {
order: 3 !important;
flex: 0 0 auto !important;
width: auto !important;
height: auto !important;
min-height: 18px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 18px !important;
text-align: left !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .forgot-password > a:hover,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header input.login-button:hover,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header input.register-button:hover,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .forgot-password > a:focus,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header input.login-button:focus,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header input.register-button:focus {
background: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #fff !important;
}
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .in-header-register,
html.ts-centralized-storefront-theme .profile-menu-box.login-form-in-header .in-header-register * {
color: #fff !important;
}
/* Mobile cart flyout header/actions follow centralized colors without affecting account/category flyouts. */
@media (max-width: 1000px) {
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme > .close-side-menu {
background-color: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
color: #fff !important;
}
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme > .close-side-menu *,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme > .close-side-menu .close-side-menu-btn,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme > .close-side-menu .close-side-menu-btn::before,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme > .close-side-menu .close-side-menu-btn::after {
color: #fff !important;
border-color: #fff !important;
}
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart .button-1,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart .button-2,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart input[type="button"],
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart a.button-1,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart a.button-2 {
background-color: var(--ts-ui-primary) !important;
border-color: var(--ts-ui-primary) !important;
color: #fff !important;
}
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart .button-1:hover,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart .button-2:hover,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart input[type="button"]:hover,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart a.button-1:hover,
html.ts-centralized-storefront-theme .mobile-flyout-wrapper.ts-cart-flyout-theme #flyout-cart a.button-2:hover {
background-color: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #fff !important;
}
/* Every SPC mobile select, including AJAX-rendered blocks. */
html.ts-centralized-storefront-theme .spc .products-mobile-navigation select.products-mobile-navigation-select,
html.ts-centralized-storefront-theme .spc .products-mobile-navigation select {
width: 100% !important;
background-color: var(--ts-ui-primary) !important;
color: #fff !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 0 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%) !important;
background-position: calc(100% - 18px) 50%,calc(100% - 13px) 50% !important;
background-size: 5px 5px,5px 5px !important;
background-repeat: no-repeat !important;
padding-right: 40px !important;
}
html.ts-centralized-storefront-theme .spc .products-mobile-navigation select:focus {
background-color: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #fff !important;
outline: none !important;
}
/* Category-page mobile Sort By and Products Per Page selectors. */
html.ts-centralized-storefront-theme .product-selectors .product-sorting select,
html.ts-centralized-storefront-theme .product-selectors .product-page-size select#products-pagesize-mobile {
width: 100% !important;
height: 50px !important;
background-color: var(--ts-ui-primary) !important;
color: #fff !important;
border: 1px solid var(--ts-ui-primary) !important;
border-radius: 0 !important;
font-size: 14px !important;
font-weight: 700 !important;
text-align: center !important;
text-transform: uppercase !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%) !important;
background-position: calc(100% - 18px) 50%,calc(100% - 13px) 50% !important;
background-size: 5px 5px,5px 5px !important;
background-repeat: no-repeat !important;
padding-left: 20px !important;
padding-right: 40px !important;
}
html.ts-centralized-storefront-theme .product-selectors .product-sorting select:focus,
html.ts-centralized-storefront-theme .product-selectors .product-page-size select#products-pagesize-mobile:focus {
background-color: var(--ts-ui-hover) !important;
border-color: var(--ts-ui-hover) !important;
color: #fff !important;
outline: none !important;
}
html.ts-centralized-storefront-theme .product-selectors select option,
html.ts-centralized-storefront-theme .spc .products-mobile-navigation select option {
background: #fff !important;
color: #222 !important;
}
}
/* END 26.10.1.1 THEME CENTRALIZATION GAP CLOSURE */
/* ==========================================================================
26.10.5.2 MOBILE UI LOCKED
Live-console approved mobile corrections. All theme-colored states use the
centralized per-store --ts-ui-primary authority; no AUOR/JKS color is hardcoded.
========================================================================== */
@media (max-width: 1024px) {
/* Logged-in mobile account flyout: clean white rows, theme header and hover. */
html.ts-centralized-storefront-theme .profile-menu-box.open,
html.ts-centralized-storefront-theme .profile-menu-box.opened {
background: #fff !important;
}
html.ts-centralized-storefront-theme .profile-menu-box > .close-side-menu {
background-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
border-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
color: #fff !important;
}
html.ts-centralized-storefront-theme .profile-menu-box > .close-side-menu *,
html.ts-centralized-storefront-theme .profile-menu-box > .close-side-menu .close-side-menu-btn,
html.ts-centralized-storefront-theme .profile-menu-box > .close-side-menu .close-side-menu-btn::before,
html.ts-centralized-storefront-theme .profile-menu-box > .close-side-menu .close-side-menu-btn::after {
color: #fff !important;
border-color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
}
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout {
background: #fff !important;
background-color: #fff !important;
color: #111 !important;
border-color: #eee !important;
}
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account::before,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account::after,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout::before,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout::after {
color: #111 !important;
border-color: #111 !important;
fill: #111 !important;
stroke: #111 !important;
}
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account:hover,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account:focus,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout:hover,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout:focus {
background: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
background-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
color: #fff !important;
outline: none !important;
}
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account:hover::before,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account:hover::after,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account:focus::before,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-account:focus::after,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout:hover::before,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout:hover::after,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout:focus::before,
html.ts-centralized-storefront-theme .profile-menu-box > a.ico-logout:focus::after {
color: #fff !important;
border-color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
}
/* Sidebar headings: reserve right-side arrow space and keep arrows white. */
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title,
html.ts-centralized-storefront-theme .side-2 .block-recently-viewed-products > .title,
html.ts-centralized-storefront-theme .side-2 .block-recently-viewed-products .title {
position: relative !important;
padding-right: 48px !important;
}
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title::before,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation > .title::after,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title::before,
html.ts-centralized-storefront-theme .side-2 .block-category-navigation .title::after,
html.ts-centralized-storefront-theme .side-2 .block-recently-viewed-products > .title::before,
html.ts-centralized-storefront-theme .side-2 .block-recently-viewed-products > .title::after,
html.ts-centralized-storefront-theme .side-2 .block-recently-viewed-products .title::before,
html.ts-centralized-storefront-theme .side-2 .block-recently-viewed-products .title::after {
left: auto !important;
right: 18px !important;
margin-left: 0 !important;
margin-right: 0 !important;
color: #fff !important;
border-color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
}
/* Mobile pagination: current/hover state follows this store's primary theme. */
html.ts-centralized-storefront-theme .pager li.current-page span,
html.ts-centralized-storefront-theme .pager li.current-page a {
background: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
background-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
border-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
color: #fff !important;
}
html.ts-centralized-storefront-theme .pager li.individual-page a {
background: #fff !important;
background-color: #fff !important;
color: #555 !important;
}
html.ts-centralized-storefront-theme .pager li.individual-page a:hover,
html.ts-centralized-storefront-theme .pager li.individual-page a:focus {
background: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
background-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
border-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
color: #fff !important;
outline: none !important;
}
}
@media (max-width: 768px) {
/* The JS measures any residual parent->banner geometry gap and removes only that gap. */
html.ts-centralized-storefront-theme .ts-mobile-app-download-banner {
top: 0 !important;
border-top: 0 !important;
}
html.ts-centralized-storefront-theme .responsive-nav-wrapper-parent {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
}
/* END 26.10.5.2 MOBILE UI LOCKED */
/* ==========================================================================
26.10.5.5 DESKTOP CATEGORY / SPC IMAGE / HEADER LOGO + ALIGNMENT HOTFIX
Console-approved desktop-only refinements. Mobile/tablet <=1024px remains
untouched. Native Emporium category hover/click behavior remains authoritative.
========================================================================== */
@media (min-width: 1025px) {
/* 1) Desktop ALL CATEGORIES: viewport-bounded list with scrollbar on outer/left edge. */
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final {
min-height: 0 !important;
height: var(--ts-cat-height) !important;
max-height: var(--ts-cat-height) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
direction: rtl !important;
scrollbar-gutter: stable !important;
scrollbar-width: thin;
scrollbar-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) #f2f2f2;
}
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final > li,
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final > li > a,
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final > li > span {
direction: ltr !important;
text-align: left !important;
}
/* 2) Native level-2 flyout escapes first-level scroll clipping without replacing native hover logic. */
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final > li > .sublist-wrap {
position: fixed !important;
left: var(--ts-cat-flyout-left) !important;
right: auto !important;
margin-top: 0 !important;
box-sizing: border-box !important;
direction: ltr !important;
}
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final > li:hover > .sublist-wrap {
width: var(--ts-cat-width) !important;
min-width: var(--ts-cat-width) !important;
max-width: var(--ts-cat-width) !important;
}
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final .sublist-wrap > ul.sublist {
min-height: 0 !important;
height: var(--ts-cat-height) !important;
max-height: var(--ts-cat-height) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
overscroll-behavior: contain;
direction: ltr !important;
scrollbar-width: thin;
scrollbar-color: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) #f2f2f2;
}
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final::-webkit-scrollbar,
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final .sublist::-webkit-scrollbar {
width: 7px !important;
}
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final::-webkit-scrollbar-track,
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final .sublist::-webkit-scrollbar-track {
background: #f2f2f2 !important;
}
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final::-webkit-scrollbar-thumb,
html.ts-centralized-storefront-theme .category-navigation-list.sticky-flyout.ts-category-final .sublist::-webkit-scrollbar-thumb {
background: var(--ts-ui-primary,var(--ts-storefront-theme,#e80109)) !important;
border-radius: 10px !important;
}
/* 3) SPC category picture exact-box fit: fill the native picture column/card height. */
html.ts-centralized-storefront-theme .spc-body .category-info .category-picture.ts-spc-exact-box {
overflow: hidden !important;
box-sizing: border-box !important;
}
html.ts-centralized-storefront-theme .spc-body .category-info .category-picture.ts-spc-exact-box > a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
html.ts-centralized-storefront-theme .spc-body .category-info .category-picture.ts-spc-exact-box img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: fill !important;
margin: 0 !important;
}
/* 4) Generic desktop header-logo fit; uploaded store logo remains authoritative. */
html.ts-centralized-storefront-theme .header-logo {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
height: 65px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin-right: 20px !important;
}
html.ts-centralized-storefront-theme .header-logo > a {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
html.ts-centralized-storefront-theme .header-logo img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 56px !important;
object-fit: contain !important;
object-position: left center !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* END 26.10.5.5 DESKTOP CATEGORY / SPC IMAGE / HEADER LOGO + ALIGNMENT HOTFIX */
/* ============================================================================
26.10.5.6 LOCKED FOOTER COLOR SPECIFICITY
Runtime JS applies the same values inline with !important for Emporium rules
that use nested STRONG elements or later theme overrides. These selectors are
a CSS-side safety net and intentionally do not recolor social SVG backgrounds;
social icon appearance is controlled independently by Footer Social Icon Mode.
============================================================================ */
html.ts-centralized-storefront-theme.ts-footer-heading-custom body .footer .footer-block .title,
html.ts-centralized-storefront-theme.ts-footer-heading-custom body .footer .footer-block .title strong,
html.ts-centralized-storefront-theme.ts-footer-heading-custom body .footer-middle .footer-block .title,
html.ts-centralized-storefront-theme.ts-footer-heading-custom body .footer-middle .footer-block .title strong,
html.ts-centralized-storefront-theme.ts-footer-heading-custom body .footer-middle .socials-and-payments .title,
html.ts-centralized-storefront-theme.ts-footer-heading-custom body .footer-middle .socials-and-payments .title strong {
color: var(--ts-footer-heading) !important;
}
html.ts-centralized-storefront-theme.ts-footer-link-social-custom body .footer .footer-block .list a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom body .footer .footer-block ul a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom body .footer-middle .footer-block .list a,
html.ts-centralized-storefront-theme.ts-footer-link-social-custom body .footer-middle .footer-block ul a {
color: var(--ts-footer-link-social) !important;
}
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom body .footer-store-description,
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom body .footer-store-description *,
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom body .footer-lower,
html.ts-centralized-storefront-theme.ts-footer-description-bottom-custom body .footer-lower * {
color: var(--ts-footer-description-bottom) !important;
}
html.ts-centralized-storefront-theme.ts-footer-divider-custom body .footer-middle > div,
html.ts-centralized-storefront-theme.ts-footer-divider-custom body .footer-middle .footer-block,
html.ts-centralized-storefront-theme.ts-footer-divider-custom body .footer-lower {
border-color: var(--ts-footer-divider) !important;
}